Elementor lets you fine-tune the layout for desktop, tablet, and mobile separately. Most style and spacing settings have per-breakpoint controls indicated by the device icon next to the value.
Switching Breakpoints
- Use the device icons in the top bar (desktop, tablet, mobile) to switch the canvas preview.
- Settings changed in desktop view apply to all devices by default.
- Settings changed in tablet or mobile view apply only to that breakpoint and smaller.
- A blue dot on a setting field indicates it has been overridden for the current breakpoint.
Hiding Elements on Specific Devices
In any widget, column, or section → Advanced tab → Responsive → toggle Hide On Desktop, Hide On Tablet, or Hide On Mobile to control visibility per device. This is useful for showing simplified layouts on mobile or hiding decorative elements on small screens.
Column Order on Mobile
On mobile, columns stack vertically in the order they appear (left to right on desktop = top to bottom on mobile). To reverse the order on mobile: click the column → Advanced → Responsive → check Reverse Columns.
Custom Breakpoints
You can define custom breakpoints beyond the default desktop/tablet/mobile. Go to Elementor → Site Settings → Layout → Breakpoints. You can add breakpoints for widescreen monitors, tablets in landscape, and mobile-landscape views.
📖 Official Docs: Responsive Editing Documentation