Over half of website visitors are on a phone, so check every change on mobile too. Elementor lets you preview and adjust each screen size separately.
Switch to mobile or tablet view
- Open the page in Elementor.
- Click the device icon in the top bar and choose Tablet or Mobile (or press Ctrl/Cmd + Shift + M).
- The preview shrinks to that screen size so you can see how the page looks.
Changing settings for one device only
Settings that show a small screen icon next to them (such as font size, spacing, alignment and image width) can be set differently for each device. Change them while in mobile view and the change only applies on phones. Desktop stays the same.
Hiding something on mobile
- Select the element and open the Advanced tab.
- Open Responsive.
- Turn on Hide On Mobile (or Tablet, or Desktop).
This is handy for a large image that doesn't work on small screens, or for showing a shorter mobile version of a section instead.
Common fixes
- Text too big on mobile: in mobile view, reduce the font size on the Style tab.
- Columns too squashed: in mobile view, set the container's Direction to stacked (column) so items sit one above another.
- Too much space: reduce padding and margin on the Advanced tab in mobile view.
- Wrong order: containers let you reverse the order on mobile using the Direction setting.
Check on a real phone
The preview is a good guide, but always open the published page on your own phone as well.
Need a hand?
If something doesn't look right, don't worry. We can usually put things back from a backup. Open a support ticket or call us on 01384 387 025.
