Dead Space on mobile mode

Topic summary

Mobile-only spacing issue on Shopify legal pages in the Focal theme: text/links don’t wrap, creating large dead space. Screenshots indicate a long, unbroken PDF link/filename likely causes overflow on small screens.

Proposed fixes:

  • Add CSS in theme.liquid (after the ) to force wrapping of long words/URLs (e.g., word-wrap/overflow-wrap). Note: the exact code snippet referenced in the reply isn’t visible in this capture.
  • Rename the linked PDF to a shorter or more breakable name (example given: “TS_QUALITY_CRITERIA_de.pdf”) to prevent overflow. The responder suggests this resolves the issue.

Context: theme.liquid is the main theme layout file in Shopify; Focal is a Shopify theme. The problem is limited to mobile views.

Status: No confirmation from the original poster that the issue is resolved. The latest guidance favors renaming the PDF and adding CSS for word wrapping. Attachments (screenshots) are central to understanding the overflow source.

Summarized with AI on December 26. AI used: gpt-5.

Hi everyone, hope you can help with the right code line.
For some reason I have a dead space on all of my legal pages (only on mobile). For some reason the text doesn’t break. Can you please help me make it look normal?

Password: 123456
26eacc-2.myshopify.com
Focal theme

Hi @Daniel19901

You can solve it by adding this code to the theme.liquid file, after tag in Online Store > Themes > Edit code


1 Like

Hi @Daniel19901

Here is your problem:

Fix this by changing other name because you already link this pdf file so named it like: “TS_QUALITY_CRITERIA_de.pdf” and it goes fix.