Missing Bootstrap 5 XL Breakpoint in SP Page Builder (Media Query Range Gap) - Forum | JoomShaper
Staff replied SP Page Builder

Missing Bootstrap 5 XL Breakpoint in SP Page Builder (Media Query Range Gap)

Asked by Petr Benes 2 weeks ago Last activity 2 weeks ago

Description
In SP Page Builder 5, the "XL" breakpoint/container range (specifically covering @media (min-width: 1200px) up to @media (max-width: 1399.98px) with a container max-width: 1140px) is missing.

While present in SPPB 4, the current responsive breakpoints skip XL and jump directly between Large (LG) and Extra Extra Large (XXL). This gap creates broken layouts and forces developers to write manual CSS overrides for screen widths between 1200px and 1399px.

Expected Behavior
SP Page Builder 5 should align with standard Bootstrap 5 grid breakpoints, specifically supporting the XL breakpoint (@media (min-width: 1200px) with standard container max-width 1140px).

Actual Behavior
The XL breakpoint range is skipped entirely, leaving @media (min-width: 1200px) unmanaged in the UI controls.

  • Reference Forum Thread: SPPB 5 Breakpoints (Post #153877 confirmed missing XL container/grid).

2 replies

Oldest first Newest first Most helpful
Rashida Rahman Staff
2 weeks ago

Hi there!

Sorry for your experience.

I checked this in the latest SP Page Builder version 6.9.1. The XL container isn't actually missing — the CSS still defines @media (min-width: 1200px) { .sppb-container { max-width: 1140px } }, same as Bootstrap 5. What's different is that SPPB's responsive system only exposes five tiers (Laptop, Tablet Landscape, Tablet, Mobile Landscape, Mobile), so there's no separate UI control for a true XL column tier — the 1200–1399px band is handled but not independently adjustable. The only large-desktop knob is Settings → Advanced → "Container Maximum Width," which per its own tooltip applies to viewports 1400px and wider (the XXL/1320px tier).

So for anything specific in the 1200–1399.98px range, a manual media query is still the way to go:

@media (min-width: 1200px) and (max-width: 1399.98px) {
  /* your XL overrides here */
}

I will forward this topic to the team, and will get back to you once I got any information.

Best regards,

Petr Benes Asked this
2 weeks ago

Thank you, this should be absolutelly in the UI.

Rashida Rahman Staff
2 weeks ago

Thanks for the feedback!

Log in to reply.