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.
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 at the bottom of the Elementor canvas (or in the top bar) to switch between desktop, tablet, and mobile preview. The canvas resizes to show how your page will look on each screen type.
What you'll need
Beginner 2 minutes- The Elementor editor open
How to switch to mobile or tablet preview
Look at the bottom of the editor canvas. You will see a small toolbar with three icons: a desktop monitor, a tablet, and a smartphone.
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 find these icons in the top bar of the editor.
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, hidden elements, adjusted spacing)
- You can still click and edit elements in this view
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 external preview button.
In the top bar, look for the eye icon (Preview Changes) or a similar preview button.
Click it. Your page opens in a new browser tab exactly as it would appear to a visitor (without publishing your saved changes).
Resize your browser window to simulate different screen sizes. Or use your browser's built-in developer tools (F12 in Chrome → toggle device toolbar) to simulate specific phone models.
Testing on a real device
For the most accurate view, open the preview URL on your actual phone. Here is a quick way to do this:
Click the preview button (eye icon) in the Elementor top bar. The preview page opens in a new tab.
Copy the URL from your browser's address bar.
Send the URL to yourself by email or messaging app, then open it on your phone.
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
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
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.