Device view

Preview your site on mobile while editing your site.

Last updated January 9, 2024

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

Change views

How you change views on a computer depends on your site's version.

Click the Mobile View 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.

device-view.gif

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

Accessing this feature

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. In Fluid Engine, you can edit your mobile layout independent of the computer layout. In the classic editor, editing your mobile preview also affects the computer view of your site.

With mobile preview editing you can:

  • Edit text in text blocks
  • Open block editors
  • Move blocks
  • Add new sections
  • Open section styles
  • Move sections up or down
  • Delete blocks and sections

It's not possible to add new blocks.

Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.