> For the complete documentation index, see [llms.txt](https://staylime.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://staylime.com/docs/volume-themes/faq/performance-and-troubleshooting/it-only-looks-wrong-in-one-browser-or-only-on-phones.md).

# It only looks wrong in one browser, or only on phones

Diagnosing display problems that appear in only one browser or only on phones, including content running off the edge and broken word wrapping.

Browser-specific and device-specific problems almost always come down to one of a few causes.

### Content runs off the edge of the screen on a phone

Something on the page is wider than the screen. In practice it is nearly always **pasted embed code with a fixed width** — a video iframe, a map, a reviews widget or a booking form copied from a third party with `width="600"` in it.

Volume sets `overflow-x: clip` and `max-width: 100vw` on the page body, so in most cases you will **not** get a sideways scrollbar. The oversized element is simply cut off at the right edge and the part beyond it is unreachable — which is why this usually gets reported as "the text is cut off" rather than "the page scrolls".

To find the offending element, open the page in your browser's developer tools, switch to a phone-sized viewport, and add this as a temporary rule:

```css
* { outline: 1px solid red; }
```

The element that extends past the right edge is the one. The fix is to make it responsive:

```css
.your-embed-wrapper iframe {
  max-width: 100%;
  height: auto;
}
```

Better still, remove the fixed `width` and `height` attributes from the embed code itself. If the embed sits in a **Custom Liquid** or **Custom HTML** section, you can edit it there directly.

### Text breaks mid-word, or wraps differently in Firefox

Volume applies `word-break: break-word` to the page body, and browser engines interpret it differently. Chrome and Safari usually only break a word when it genuinely does not fit; Firefox is more eager, so a long product name or heading can break mid-word there while looking fine everywhere else.

For one heading or section, put this in that section's **Custom CSS** field, targeting the element in question:

```css
.section-heading {
  word-break: normal;
  overflow-wrap: anywhere;
}
```

To apply it everywhere, use **Theme settings → Custom CSS** and target the body instead — a section's own **Custom CSS** cannot reach outside its section:

```css
body {
  word-break: normal;
  overflow-wrap: anywhere;
}
```

`word-break: normal` restores standard wrapping, and `overflow-wrap: anywhere` still allows a break if a single word really is wider than its container — so you do not trade one problem for another.

### It looks fine for you and broken for a customer

Check in an incognito window with extensions disabled. Ad blockers, password managers and translation extensions all inject styles.

Also check the customer's **market**. A market can use its own template — for example `templates/product.context.gb.json` alongside `templates/product.json` — with its own section and block order. If a block appears in the theme editor but not on the live storefront in a particular country, this is almost always why, and no amount of CSS debugging will find it.

{% hint style="warning" %}
When reporting a browser-specific issue, send us the browser and version, the device, the exact URL and a screenshot. "It's broken on mobile" cannot be reproduced; "Safari 17 on iPhone 13, this URL, heading overlaps the image" can.
{% endhint %}

{% hint style="success" icon="lightbulb" %}
If an app or custom code is involved, start with [An app or some custom code broke my layout](/docs/volume-themes/faq/performance-and-troubleshooting/an-app-or-some-custom-code-broke-my-layout.md).
{% endhint %}


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://staylime.com/docs/volume-themes/faq/performance-and-troubleshooting/it-only-looks-wrong-in-one-browser-or-only-on-phones.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.