How to adapt Elementor Page Builder for the largest screen size in Bootstrap 5.
Bootstrap 5 introduces an extra-extra-large screen size option for displays larger than 1400 pixels, to support very big screens.
This extra-extra-large screen setting is crucial because many laptops and tablets now have high-resolution 2K and 4K screens, which are much bigger than regular high-definition screens.
A trick for Elementor Page Builder to use Bootstrap 5's XX-large breakpoint.
When making a special WordPress theme that uses both Bootstrap 5 and Elementor, there's a problem: Bootstrap's main box is 1320 pixels wide, but Elementor's standard box is only 1140 pixels wide. This size difference makes parts of the website look uneven.We can't rely only on Elementor for everything. If we need unique parts for the site, we create our own PHP code and put it inside Elementor. This is when the different areas of the website don't look right together.
The picture demonstrates this issue: the first part, built with Bootstrap code, is wider, while the part below it, created with Elementor, is thinner.
To fix this, there's a simple CSS trick that makes the sections equal when using both Elementor Page Builder and Bootstrap. Just copy and paste the provided CSS code 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);
}
}
This CSS code uses a media query to apply a maximum width of 1320 pixels to Elementor's box container on screens larger than 1400 pixels.
Tags:
Bootstrap
