Module 3 of 6
Training / Elementor essentials / Lesson 8 of 8
More than half of your visitors are likely to be on a phone. A page that looks right on your computer can look cramped on a small screen, so always check before you publish.
You'll learn
How to see your page on a phone or tablet and fix anything that looks wrong
Takes
About 5 minutes
You'll need
A page open in Elementor
Watch: “Master Responsive Web Design with Elementor”, an official video from Elementor. It shows the same job on their own demo site, so your screen may look a little different. The written steps below are the ones to follow.
1
Click the screen icon in the top bar and choose the phone. The page narrows to phone width. You can also press Ctrl + Shift + M, or Cmd + Shift + M on a Mac.
2
Check that text is readable, photos aren’t cropped strangely and buttons are easy to tap.
3
If you change words or pictures, they change on every screen size. There is only one copy of your content.
4
Settings with a small screen icon beside them, such as text size and spacing, can be different on each device. Change one while in mobile view and it only affects phones.
5
Select the item, open the Advanced tab, then Responsive, and switch on Hide On Mobile. Use this sparingly.
6
Look at tablet view too, switch back to desktop and click Publish.
Words are shared across all screen sizes. Only size and spacing can differ.
The setting you changed has no screen icon, so it applies everywhere. Undo it.
The editor is a close guide, not an exact match. Always check the live page on your own phone too.
Tell us which page it’s on and what you’re trying to do. We can talk you through it or make the change for you.
