Elementor Boxed Container System: Clean Multi-Width Setup for V4 (and V3)

Why Your Elementor Layout Needs a Proper Boxed Container System

If you’ve ever built a website in Elementor and noticed that text stretches awkwardly across the full screen on desktop, you’ve already run into the problem that a good boxed container system solves. On mobile, screen space is tight enough that content naturally stays compact. But on desktop, full-width text becomes uncomfortable to read — and without a structured approach, layouts can look inconsistent from section to section.

Rino de Boer recently walked through exactly how he builds his container system in Elementor V4, and the approach is practical enough that beginners can follow it while also offering depth for more experienced builders. What’s especially useful is that the single-container method he demonstrates works in both V3 and V4 — so there’s no need to wait until you’ve fully migrated to the Atomic Editor.

The Case for Multiple Container Widths

Most Elementor users work with a single boxed container width and call it a day. But not all content works at the same width. A long block of body text reads better in a narrower container. A full-bleed image gallery or a visual hero section benefits from more breathing room. And some elements — like a navigation bar — should span the full width entirely.

Using different widths for different sections also has a design benefit: it breaks up visual monotony. When every section on a page is the same width, the layout can feel repetitive. Mixing widths adds rhythm without requiring any extra design effort.

Rino identifies three practical container widths that all stem from the same 12-column grid math:

• Small (section-s): 760px — ideal for text-heavy sections, blog content, or anything that benefits from a narrow, readable column
• Medium (section-m): 1120px — the standard content width, suitable for most sections
• Large (section-l): 1240px or 1284px — for visual sections with images or wider card layouts

Where Does 1120px Come From? (The Grid Math)

Elementor’s default boxed width is 1140px — but according to Rino, that number is slightly off. The mathematically correct value, based on a 12-column grid with 20px gaps, is actually 1120px.

Here’s why: a 12-column grid only has 11 gaps between columns (not 12), because there’s no gap on the outside edges. So with 75px-wide columns and 20px gaps, the calculation looks like this:

• 12 columns × 75px = 900px
• 11 gaps × 20px = 220px
• Total = 1120px

The 1140px default likely comes from Elementor including its own default 10px left and right container padding. When builders remove that default padding — which many do — the container effectively becomes 1140px instead of the intended 1120px. Starting from 1120px avoids that inconsistency.

Using the same column-width logic, decreasing each column to 45px produces a total of 760px for the small container, and increasing to 85px columns (or bumping the gap to 24px) produces 1240px or 1284px for the large container. Rino notes he avoids going wider than 1284px because many laptop users are still on 1366px-wide screens — and a container that’s too close to the screen width starts to feel cramped.

Method 1: The Two-Container Approach (Easier)

The simpler method uses two nested Flexbox containers in Elementor V4. Here’s how it works:

1. Drag a Flexbox onto the canvas as the outer container. This becomes the section background.
2. Add 5% left and right padding to the outer container. This creates a safe margin so content never touches the screen edges — even on smaller screens.
3. Drag a second Flexbox inside the first. This inner container gets a fixed max-width — for example, 1120px for a medium section.
4. Convert the outer container to a global class called section and the inner container to a class like boxed-m.

To handle alignment, set the outer container to column direction and use align-items center so the inner box stays horizontally centered. Adding default top and bottom padding (like 5rem) to the section class means every new section automatically has consistent spacing — with the option to override it locally when a specific section needs more or less.

When the screen shrinks below 1120px, the 5% padding on the outer container kicks in to keep content from touching the edges. This means the system works at every breakpoint without needing separate tablet or mobile overrides.

To build out the full system, duplicate the inner container, swap the class name, and change the width. For example: boxed-s at 760px and boxed-l at 1240px. Full-width sections don’t need an inner container at all — the outer section container with its 5% padding handles it cleanly.

Method 2: The Single-Container Approach (Cleaner)

The more advanced — and arguably more elegant — solution achieves the same result with just one container per section. Instead of nesting a fixed-width inner container, the padding of a single container is calculated dynamically using a CSS formula.

The formula Rino uses is:

max(5%, calc((100% - 1120px) / 2))

This gets applied to both the left and right padding of a single Flexbox. Here’s what it does: it calculates how much space needs to sit on either side of the 1120px content area, based on the current browser width. If the result of that calculation drops below 5% — which happens on smaller screens — it falls back to the 5% minimum instead. This means the container behaves just like the two-container system, but with fewer elements in the DOM.

To set this up in Elementor V4, open the spacing settings for the Flexbox, unlink the padding values, and switch the left and right fields to Formula mode. Paste the formula in, and do the same on the other side. Then convert the container to a global class — Rino calls his section-m.

For the other sizes, create additional classes with the same formula but swap out the target width:

• section-s: replace 1120px with 760px
• section-l: replace 1120px with 1240px
• section-full: skip the formula entirely and just set 5% left and right padding manually

The result is a set of four reusable classes that cover every layout scenario — narrow text columns, standard sections, wide visual sections, and full-width layouts.

Why It Matters: Consistency, Reusability, and AI-Readiness

One of the most practical aspects of this system is that you only build it once. After the classes are set up, every new section on any page of the site just needs a class applied — no adjusting padding values, no guessing at widths, no checking if things look right on mobile. The system handles all of that automatically.

There’s also a less obvious benefit worth highlighting: this kind of structured, named class system works particularly well if you’re using AI tools or MCP agents to help build pages in Elementor. Without a consistent system in place, AI-assisted building tends to produce unpredictable layouts. But when the agent knows to use section-s for narrow text content and section-l for wide visual layouts, it can make layout decisions that are actually consistent with the rest of the site.

Using These Classes in Elementor V3 Containers

One genuinely useful discovery Rino shares is that the single-container classes aren’t limited to V4 Atomic Flexbox containers. They can also be applied to old V3 containers by entering the class name in the Advanced tab’s CSS Class field.

For example, dragging in a V3 container, setting it to full width, and then typing section-m in the CSS class field pulls in all the padding rules defined in the Atomic Editor class. The container behaves exactly like a V4 section-m — even though it’s technically a V3 element.

This makes the system useful right now, regardless of whether a project has migrated to the Atomic Editor or not.

Quick Reference: The Class System at a Glance

• section-s: max-width equivalent of ~760px, best for text-heavy or narrow content
• section-m: max-width equivalent of ~1120px, standard layout width
• section-l: max-width equivalent of ~1240px, for visual or wide sections
• section-full: full width with 5% edge padding, for menus, banners, and edge-to-edge designs

The padding formula for section-m: max(5%, calc((100% - 1120px) / 2)) — applied to both left and right padding. Adjust the pixel value to match the target width for other classes.

For those who want to go further, Rino also mentions using a clamp() function for top and bottom padding. This makes vertical spacing shrink automatically on mobile without needing breakpoint overrides. There are free clamp generators online that make it straightforward to calculate the right values — just input your desktop and mobile sizes and copy the output into the formula field.

FAQ

Why is 1120px used instead of Elementor’s default 1140px?

Elementor’s 1140px default includes its own built-in 10px container padding on each side. When that padding is removed — which many builders do — the actual content width shifts. The mathematically correct width for a 12-column grid with 75px columns and 20px gaps is 1120px (12 × 75 + 11 × 20). Using 1120px as the base keeps the grid math clean and consistent.

What is the single-container padding formula and how does it work?

The formula is: max(5%, calc((100% – 1120px) / 2)). It calculates how much padding to add on each side so that the remaining content area equals the target width (1120px). The max() function ensures the padding never drops below 5%, which keeps content from touching the screen edges on smaller screens. Apply it to both left and right padding using the Formula input in Elementor’s spacing settings.

Can this container system be used with Elementor V3?

Yes. The classes created using the single-container method (section-s, section-m, section-l, section-full) can be applied to V3 containers by typing the class name into the CSS Class field in the container’s Advanced tab. The V3 container will then use the padding rules defined in the Atomic Editor class.

Do I need to set up separate mobile styles for these containers?

No. The 5% minimum padding in the formula ensures content never touches the screen edges at any breakpoint. On small screens, the formula automatically falls back to 5% left and right padding, so the layout adjusts without requiring tablet or mobile overrides.

When should I use section-s vs section-m vs section-l?

Use section-s (760px) for text-heavy sections like blog posts or long-form content where readability matters. Use section-m (1120px) as the default for most standard sections. Use section-l (1240px) for visual sections with images, cards, or wider layouts. Use section-full for elements like navigation bars or full-bleed backgrounds that should span the entire width.

Should I use a Flexbox or a Div Block for sections in Elementor V4?

Flexbox is generally the better choice for section containers. While a Div Block can accept the same classes, it doesn’t show layout controls unless converted to Flexbox. Since Flexbox already has flex display selected by default, it gives more immediate control over alignment and direction — which is useful when setting containers to column layout.

This article is an original commentary piece inspired by the video above.