With Device View, you can preview how your site appears on mobile devices. This is a great way to test your site's responsive design as you edit and make style changes on the fly.
Device View is a tool for you to use when you're logged in and managing your site. Visitors won't see Device View.
Watch a video
This video applies to version 7.0.
How you change views on a computer depends on your site's version.
Click the Mobile Preview icon in the top-right corner of the site preview frame.
Move your mouse above the site preview frame and click the arrow to show the device icons. Click an icon to preview your site's appearance on the corresponding device.
While editing a page, the device icon in the top-right corner shows you which device you're currently previewing. Tap the icon to switch between phone and computer views. There's also a tablet view icon on iPads.
How it works
Device View gives you a general idea of how your site appears on a typical mobile browser. It's not 100% accurate for every phone or tablet.
While Device View represents the typical mobile experience, some discrepancies are unavoidable. Window sizes vary between devices, and some templates' features will look or behave differently on an actual mobile device than they do in Device View. For more information, visit your template's guide.
Edit in mobile preview
Mobile preview editing is supported in version 7.1.
In Device View, click Edit in the top-left corner to edit your site content and organize sections within the mobile preview. Keep in mind, editing your mobile preview also affects the desktop view of your site.
With mobile preview editing you can:
- Edit text in Text Blocks
- Open block editors
- Move blocks
- Open section styles
- Move sections up or down
- Delete blocks and sections
It's not possible to add new blocks or sections.