Getting mobile right in Elementor comes down to one rule and one habit. The rule: settings flow down from desktop to tablet to mobile unless you override them, so set desktop first and adjust each smaller device after. The habit: check every page on a real phone, because the editor’s mobile preview isn’t one.
The editor preview said it looked fine on mobile. Then the client opened the page on their phone at a café and the heading broke across four lines, the button sat half off the screen and the photo of the team cropped out everyone’s heads.
This happens because Elementor’s mobile preview is a resized desktop browser, not a phone. It’s a good guide, but it isn’t the real thing.
How Elementor decides what each device sees
Elementor uses breakpoints, the screen widths where the layout switches from one version to another. By default there are three devices:
- Desktop: wider than 1,024 pixels
- Tablet: 768 to 1,024 pixels
- Mobile: 767 pixels and narrower
You can change these numbers and add up to six breakpoints in total: Mobile Extra, Tablet Extra, Laptop and Widescreen join the default mobile and tablet. They’re set in the editor under Site Settings > Layout > Breakpoints. Elementor’s responsive editing guide has the full walkthrough.
Our advice: stick with the defaults unless you have a specific problem to solve. Every extra breakpoint is another version of every page to check and maintain. A Laptop breakpoint can be handy if your design looks cramped on 13-inch screens. Most small business sites never need the others.
Settings flow downhill
This is the most important thing to understand. Responsive editing in Elementor is top-down: a value set on desktop applies to tablet and mobile too, unless you set a different value for those devices.
A worked example. You set a heading to 48 pixels on desktop. You haven’t touched tablet or mobile, so they also get 48 pixels, which is too big on a phone. You switch to mobile view and set it to 30 pixels. Now:
- Desktop: 48px
- Tablet: 48px (inherited from desktop)
- Mobile: 30px
Then you go back and change desktop to 56 pixels. Tablet follows (now 56px) but mobile stays at 30px, because you gave it its own value.
Settings that can vary by device show a small device icon beside them. Click it to switch which device you’re editing. If you’re doing a lot of mobile work, switch the whole editor to mobile view using the device icons in the top bar first, so you can’t accidentally change the desktop value.
The practical lesson: set your desktop values first, then adjust tablet, then mobile. Working in the other direction means your mobile values quietly get overwritten as you go.
In Elementor’s newer version 4 elements, responsive editing works by switching device mode in the top bar, and every style option can vary by device. Classic widgets still use the device icon on each control.
The usual mobile fixes
Most mobile problems come down to a handful of settings:
Font sizes. Headings that look elegant at 56px on desktop will wrap badly on a phone. Set mobile heading sizes in your global fonts so every heading gets them automatically.
Padding and margins. Desktop sections often have 100px or more of top and bottom padding. On mobile, that’s a lot of scrolling past empty space. Halve it, or more.
Column direction. Two containers side by side on desktop will stack on mobile. If you want the right-hand one (often the image) to appear first, set the parent container’s direction to reversed for mobile, as Elementor describes in its mobile layout troubleshooting guide.
Widths. A container set to a fixed pixel width on desktop can overflow a phone screen. Use percentages, or set the mobile width to 100%.
Image focus. A wide banner image will be cropped on a tall phone screen. Set the background position on mobile so the important part stays in view, or use a different image for mobile.
Hiding elements: when it’s fine and when it isn’t
Every element has Hide on Desktop, Hide on Tablet and Hide on Mobile toggles under Advanced > Responsive. They’re useful, and they’re overused.
The key thing to know: hiding an element in Elementor hides it visually, but it’s still in the page. The browser still downloads it. So a common “fix” of building a desktop version and a mobile version of a section, then hiding one on each device, means every visitor loads both. It also doubles your maintenance. Update the desktop version’s pricing, forget the mobile one, and phone visitors see last year’s prices.
Hiding is fine for: decorative elements that clutter a small screen, a long desktop phone number replaced by a tap-to-call icon in the mobile header, or a secondary image that adds little.
Hiding is a bad idea for: content that matters, such as service details, pricing, trust signals or anything someone might be looking for. If it doesn’t fit on mobile, it needs a different layout, not a disappearing act. Google mainly looks at the mobile version of your site when deciding how to rank it, which is another reason to make sure the mobile version carries everything important.
Duplicating sections per device is a last resort. Containers can almost always reorder or restack content instead.
Test on real phones
This is the ten-minute test we do on each page before launch. Use your own phone and, ideally, one other: an older Android or a small iPhone shows up problems that a new large phone hides.
- Load the page on mobile data, not Wi-Fi. Does the first screen appear quickly?
- Read the first screen. Is it obvious what the business does and what to do next?
- Scroll the whole page. Does anything stick out past the edge, causing sideways scrolling?
- Tap every button and link. Are they big enough to hit with a thumb without zooming?
- Open and close the menu.
- Tap the phone number. Does it dial?
- Fill in the form, including any dropdowns and date pickers. Our guide to Elementor Forms covers what to check once it’s submitted.
- Rotate the phone to landscape. Does anything break?
- Turn your phone’s text size up a notch in accessibility settings and check headings and buttons still fit.
If a change you made doesn’t show on the phone, clear the cache. In WP Admin, go to Elementor > Tools and use Clear files & data, then clear any caching plugin, then reload.
Design for phones from the start
Fixing mobile after the desktop design is finished is always harder than designing for phones first. If most of your enquiries come from mobile (and for most local businesses they do), our article on designing for phones first explains how that changes the layout. It’s also why, in our web design service, mobile is where we start a design rather than where we finish it.
This week, run the real-phone test on your three most visited pages. If it turns up more than you want to fix yourself, ask us to take a look; mobile layout repairs are one of the most common Elementor fixes we do.