> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/help-and-faqs/the-desktop-screen-look-more-like-on-a-tablet.md).

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

### What you are seeing <a href="#what-you-are-seeing" id="what-you-are-seeing"></a>

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 <a href="#why-it-happens" id="why-it-happens"></a>

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 <a href="#how-to-preview" id="how-to-preview"></a>

{% hint style="success" %}
**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.
   {% endhint %}

*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.

{% hint style="info" %}
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.
{% endhint %}

### When to contact support <a href="#when-to-contact-support" id="when-to-contact-support"></a>

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: **Vélare 1.0.0**, shown under the theme name in **Online Store > Themes**.
* A [staff account](/velare/help-and-faqs/staff-account.md) for the support team.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Layout](/velare/set-up-your-store/layout.md): the page content width the theme uses on desktop
* [How do I change the font size on mobile and desktop separately?](/velare/help-and-faqs/how-do-i-change-the-font-size-on-mobile-and-desktop-separately.md): the other common desktop and mobile difference
* [Staff account](/velare/help-and-faqs/staff-account.md): how to give the support team access to your store


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/help-and-faqs/the-desktop-screen-look-more-like-on-a-tablet.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.