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:
* { outline: 1px solid red; }The element that extends past the right edge is the one. The fix is to make it responsive:
.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:
.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:
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.
Was this helpful?