Elementor Page Builder Hack for Bootstrap 5 XX-Large Breakpoint
Bootstrap is one of the most widely used frontend CSS frameworks for creating responsive websites, with the 12 columns grid layout and useful components Bootstrap makes web development seamless.
Bootstrap 5 comes with the new breakpoint XX-large (Extra extra-large) to support full HD screen sizes. The new XXL breakpoint targets screen sizes larger than 1400px.
XXL breakpoint is the most needed feature in Bootstrap as the resolution of the laptop is going beyond just the HD display. Now 2K and 4K resolution are common in laptops and even tablets are coming up with 2K display resolutions.
Also read:
Elementor Page Builder Hack for Bootstrap 5 XX-Large Breakpoint
Now the issue is, when we develop a custom WordPress theme using Bootstrap 5 and Elementor, Bootstrap’s container uses 1320px width and the Elementor Page builder’s boxed container uses only 1140px width which makes the website sections unequal.
We can’t simply build everything with Elementor page builder, if we want customized sections in the website then we write custom PHP code and embed it into the Elementor page builder. And this is where the website section looks unequal.
Below is the screenshot of the website which is built with Bootstrap 5 and Elementor page builder. Here you can understand the issue, the first section which is custom-coded in Bootstrap is larger in width and the below section designed in Elementor is smaller.
There is a simple CSS hack to make the website sections equal when we use both Elementor Page Builder and Bootstrap to build the website sections, just copy the CSS code below and paste it into your stylesheet.
@media screen and (min-device-width: 1400px) {
.elementor-section.elementor-section-boxed > .elementor-container {
max-width: 1320px !important;
padding-right: calc(1.5rem * .5);
padding-left: calc(1.5rem * .5);
}
}
The CSS code mentioned above uses a media query to target the screen size above 1400px and applies max width of 1320px to the Elementor’s box container.