Header text is cut off into two different lines in Dawn

Store Design
, , , , ,

Topic summary

Header text breaks mid‑word on mobile in the Dawn theme (e.g., “Poste” + “rs”), while desktop looks fine. Screenshots illustrate the issue.

Initial workaround:

  • Applied mobile-only CSS to reduce heading and paragraph sizes at max-width: 600px.
  • Implemented via each element’s Custom CSS panel to avoid changing all h2/p sitewide.

Root cause identified:

  • A non‑breaking space (  or  ) between words (e.g., “Badass Posters”) made the browser treat them as a single unbreakable unit.
  • With existing word-break settings, this forced a break inside “Posters.” A non‑breaking space prevents line breaks at that position.

Fix and outcome:

  • Removing the non‑breaking space in the theme editor resolved the mid‑word split without needing the CSS change.
  • The mobile font-size adjustment was kept by preference, but is not required for the fix.

Status: Resolved. Key lesson—check for unintended non‑breaking spaces in heading content before resorting to global CSS changes.

Summarized with AI on January 3. AI used: gpt-5.
1

Hello! I’ve got an issue with my header text on mobile devices where the words are being cut off and moved to the line below. For example, “Posters” is displayed as “Poste” on one line, and “rs” on the line below it. This problem doesn’t occur on desktop.

I’ve made several modifications to my theme, including adjusting the image banner to fit the full width and height of the viewable screen area and hiding the header background. I think that the issue may be related to the changes in the image banner size.

How I can fix this issue of the text being cut off? Ideally, I’d like to maintain the current font size, or slightly reduce it. My website is wallculture.co. I’d appreciate any help here.

shaf04_1-1710548295685.png
shaf04_1-1710548295685.png375×667 193 KB

shaf04_2-1710548334223.png
shaf04_2-1710548334223.png2542×1293 746 KB

2

Ironically after making this post, I found a solution:

 @media screen and (max-width: 600px) {
.h2,
h2 {
font-size: 40px !important;
}
.p,
p {
font-size: 1.5rem !important;
}
}

Source: https://community.shopify.com/post/1463639

The key difference is, I did not add these directly into the theme code, rather into the Custom CSS panels found in the theme editor for the affected elements (the Custom CSS panel on the right side of the screen). This was because if I added this code into the theme code directly, it changes the h2 and p size for all text on the screen, which is not ideal. I added some other stuff to optimise other areas of the mobile website, such as changing the font size of p to a smaller one.

If anyone has a more optimised/better way of fixing this exact solution, please share for everyone also having this same issue. For now though, I’m glad I got a rough fix to the issue.

3

Is this non-breakable space intentional? Because this is what makes your word break in the middle – since there is a &nbsp, browser treats

“Badass Posters” as a single word which would not fit on one line anyway…

Screenshot 2024-03-16 at 2.00.33 pm.png
Screenshot 2024-03-16 at 2.00.33 pm.png883×213 66 KB

1 Like
4

Hey Tim, that was not intentional. Looking in inspector, I also see the   there too, no idea where that came from. Tried searching for   in theme code, particularly in index.json and other files, but I couldn’t find that non-breaking space anywhere either. After that though, I thought I’d look in the theme editor itself, and nothing seemed out of the ordinary there until I altered the text (added a random letter, then removed it), and the   surprisingly disappeared. To fully test I temporarily removed the code I found previously, and can confirm that this was the issue I was facing. I added my code back in anyway as I thought the heading could be a tad smaller on mobile anyway. This is my solution, thank you!

1 Like