Why does the desktop preview in the theme editor look like a tablet?

What you are seeing

You are customizing the theme in the Shopify theme editor with the desktop view selected, but the preview does not look like your live store on a desktop. Columns stack, the menu collapses, and things look closer to a tablet. To check a change properly you end up switching the preview to full screen every time.

Why it happens

This is the theme editor, not your theme. Shopify reserves part of the browser window for the settings sidebar, which can take anywhere from 30% to 40% of your screen width. The preview only gets what is left, so the theme responds to that narrower width exactly as it would on a real device of that size.

On a large monitor the leftover width is still wide enough to look like desktop. On a small screen, such as a 13 inch laptop, it is not, so the responsive layout switches to the tablet arrangement.

Your live store is unaffected. Customers see the layout that matches their own screen width.

How to preview the real desktop layout

Steps:

  1. Keep the theme editor open in one browser tab.
  2. Open your storefront preview in a second tab, using the full width of your screen.
  3. Make a change in the editor tab and save it.
  4. Refresh the second tab to see the change at true desktop width.

Result: you edit in one tab and check the result at full width in the other, without switching the preview to full screen after every change.

If you only need a quick look, expanding the editor preview to full screen shows the same thing. The two tab method is faster when you are making many changes in a row.

When to contact support

Contact support if the layout is still wrong at full width in a normal browser tab, which means it is the theme and not the editor. A section overlapping another one, content running off the side of the screen, or a horizontal scrollbar on desktop are all worth reporting.

Send this with your first message:

  • Your store URL, and the URL of the page that looks wrong.
  • Your screen resolution and browser, and whether the browser is zoomed to anything other than 100%.
  • A screenshot taken in a normal browser tab, not inside the theme editor.
  • Theme name and version: Laurel 1.0.0, shown under the theme name in Online Store > Themes.
  • A staff account for the support team.

Related pages

  • Layout : the page content width the theme uses on desktop
  • How do I change the font size on mobile and desktop separately?: the other common desktop and mobile difference
  • Staff account: how to give the support team access to your store

Comments

No comments yet

Looking for Help?
Get support from our team

If you can't find the answer you're looking for, our support team is here to help.