Responsive Container Layout
Extends the free Container Content Layout with per-breakpoint container type selection. Set Flexbox on desktop, Grid on tablet, Slider on mobile — one container, independently per device.
How it works
The free Container Content Layout module adds Slider and Custom Layout types to Elementor containers — but the type is the same on every breakpoint. Responsive Container Layout removes that limitation: each breakpoint gets its own container type setting.
Switching device mode in the Elementor editor updates the Content Layout control to show the active breakpoint's value. Grid controls (columns, rows, gaps) automatically appear or hide based on whether the current breakpoint resolves to Grid.
Inherit logic
Breakpoints follow Elementor's standard inherit chain. You only set what you want to change:
| Breakpoint | Falls back to |
|---|---|
| Desktop | — (base value) |
| Tablet | Desktop (if not set) |
| Mobile | Tablet → Desktop (if not set) |
Example
A container holding 4 cards:
| Breakpoint | Layout | Result |
|---|---|---|
| Desktop | Flexbox row | 4 cards side by side |
| Tablet | Grid 2×2 | 2 cards per row |
| Mobile | Block (inherited Flex, column) | Stacked |
No media queries. No extra CSS classes. No duplicated containers.
Supported layout types per breakpoint
- Flexbox — Elementor's native flex container
- Grid — Elementor's native grid container
- Slider — CSS-based slider (from Container Content Layout)
- Custom Layout — template-driven layout (from Container Content Layout)