The majority of your visitors arrive on a phone. Sites are nevertheless almost always built on a large screen — and the small view gets checked, if at all, right at the end. That is exactly where the problems come from that I most often repair in training sessions.
The one change of habit
Build the page section by section, and check every section on mobile immediately before moving on to the next. Not everything at once at the end.
The difference is considerable: if you correct twenty sections simultaneously afterwards, you lose track of which change took effect where. Section by section, each one is a trifle.
You switch the view in the editor at the bottom left via the device icon.
How the device views relate to each other
The principle most people fall down on at first: Elementor inherits from large to small.
What you set in the desktop view automatically applies to tablet and phone as well — as long as you do not set something different there. As soon as you enter your own value in the phone view, that value is fixed for the phone and no longer follows the desktop.
Two practical rules follow from this:
Always change content in the desktop view. If you edit text in the phone view it does change everywhere — but you easily lose track of which setting is anchored where.
Only set mobile values where they are needed. Every overridden value is one more place you have to maintain in future changes.
The five most common mistakes
Fixed pixel widths. A container 1200 pixels wide fits on no phone screen and produces horizontal scrolling. Use percentage values or a maximum width instead of a fixed one.
Spacing intended for desktop only. 120 pixels of padding top and bottom look generous on a large screen. On a phone they mean the visitor scrolls past empty space. Set considerably smaller values on mobile — usually half or less.
Font sizes with no mobile adjustment. A 64-pixel heading runs to five lines on a phone. For headings, a separate, smaller value is almost always worth it.
Tap targets that are too small. Buttons and menu items need a minimum size so they can be hit reliably with a thumb — around 44 by 44 pixels. Two links directly beneath each other with little spacing are an imposition on a phone.
The wrong order. On desktop the image is on the left, the text on the right. On a phone they stack — and suddenly the image comes before the heading. With flexbox containers you change the order per view under Advanced, without duplicating the build. Why containers are superior here is covered in containers instead of sections.
Hiding elements on mobile — with care
Under Advanced → Responsive you can hide elements per device. That is useful for decorative graphics that only take up space on a phone.
Two caveats: hidden elements are still loaded — you save space, but not loading time. And never hide content that is needed to understand the page. A mobile version missing essential information is not an optimisation.
Custom breakpoints
By default Elementor works with desktop, tablet and phone. Under Site Settings → Responsive you can activate additional thresholds, for large screens or small phones for instance.
My advice: stick with the three standard views as long as you do not have a concrete problem. Every additional breakpoint means another view you have to check with every change — and in practice nobody notices the extra precision.
Checking: not just in the editor
The phone view in the editor is a simulation. It shows the width correctly, but not everything: touch behaviour, actual type rendering, loading behaviour on a poor connection.
Look at the page on a real device at least once before it goes live. And check two things in particular: can the page be dragged sideways? Then something somewhere is too wide. And does the menu work — does it open, can it be closed?
As for loading time
On mobile the connection is often worse and the device slower. That is also exactly where the Core Web Vitals are measured that feed into search rankings. If you want to save loading time in one place, make it mobile: Elementor and Core Web Vitals.
Elementor Pro: The responsive settings exist in both versions. Pro extends them to the header area, footer and popups — with the menu on a phone in particular, that is the noticeable difference. View Elementor Pro
If you would like to go through your site on mobile together once, rather than treating individual symptoms, that is a typical part of my Elementor training.
Tags