Previewing tablet & mobile views in Elementor
Learn how to preview how your page looks on phones and tablets before publishing, using Elementor's built-in device preview modes.
- Time
- 2 minutes
- Difficulty
- Beginner
- You’ll need
- The Elementor editor open
Before you publish changes, it is important to check how your page looks on smaller screens. Elementor has a built-in preview tool that simulates different device sizes — no phone needed.
Quick summary
Click the device icons (Responsive views) in the Elementor top bar to switch between desktop, tablet, and mobile view. The canvas resizes to show how your page will look on each screen type.
What you'll need
- The Elementor editor open
How to switch to mobile or tablet preview
Look at the top bar of the editor. Find the device icons (Elementor calls them Responsive views). By default there are three: desktop (PC), tablet, and mobile. If extra screen sizes have been set up on your site, their icons appear there too.
Click the tablet icon to see how the page looks on a medium-sized screen (like an iPad).
Click the phone icon to see the mobile view.
Click the desktop icon to return to normal editing mode.
You can also press Ctrl+Shift+M (Cmd+Shift+M on a Mac) to switch between the desktop, tablet, and mobile views.
What you see in preview mode
When you switch to tablet or mobile view:
- The canvas shrinks to approximate a screen of that size
- Any responsive settings you have applied take effect (different font sizes, adjusted spacing). Elements hidden on that device appear grayed out instead of disappearing
- You can still click and edit elements in this view
- Handles appear at the sides and bottom of the screen. Drag them to try other screen widths
This preview is an approximation. It shows the correct layout and font sizes, but does not perfectly replicate every phone browser. Always test on a real device too.
Using the Elementor external preview
For a more realistic preview — showing your page in the browser without the editor panels — use the Preview button.
In the top bar, find the Preview icon, just to the left of the Publish (or Update) button.
Click Preview. Your page opens in the browser, showing how it would look to a visitor. Previewing does not publish anything.
Resize your browser window to simulate different screen sizes. Or use your browser's built-in developer tools to simulate specific phone models. In Chrome, press F12 (Cmd+Option+I on a Mac), then click Toggle device toolbar.
Testing on a real device
For the most accurate view, look at the page on your actual phone. A preview link is not the page's real address, and WordPress checks preview links against the logged-in user, so a preview link sent to your phone may not work. The most reliable check is the live page:
Publish or update the page once you are happy with how it looks in the editor's mobile view.
Open the page on your phone. Type its address into your phone's browser, or send the link to yourself by email or a messaging app.
Check the page thoroughly — scroll through the whole page, check text size, image proportions, and button tap targets.
What to check on mobile
When reviewing your page on mobile, look for:
- Text that is too small to read comfortably
- Images that are too large or out of proportion
- Buttons that are hard to tap (too small or too close to other tappable elements)
- Columns that stack in an unexpected order
- Section padding that feels too generous or too tight
- Any content that is cut off or overflowing the screen
If you spot any of these issues, see Making your page look good on mobile for how to fix them.
Common questions
The mobile preview looks fine but it looks wrong on my actual phone — why?
The in-editor preview approximates mobile, but real browsers on real devices can differ. Check the page on an actual device for the most reliable view. Different phones and browsers also render slightly differently.
Can I edit in mobile view, or is it just for viewing?
You can make edits while in mobile view. Settings that show a device icon next to them can be set per device, so changing them in mobile view affects mobile only. Settings without a device icon, such as the text itself, change on every device. For most content changes (like editing text), it is fine to work in desktop view.
How do I fix elements that overlap on mobile?
Overlapping often comes from margin settings (especially negative margins), z-index, or absolute positioning. Switch to mobile view, click the problematic element, and adjust its margins. See Spacing, margin & padding for help.
Related guides
- Making your page look good on mobile
- Spacing, margin & padding
- Publishing & updating your page
- A tour of the Elementor interface
Need a hand?
Learn more
Last updated
Making your page look good on mobile
Learn how to use Elementor's responsive editing tools to control how your page looks on phones and tablets.
Elementor templates explained
Understand what Elementor templates are, how they save you time, and the difference between page templates, block templates, and the template library.