Header text is cut off into two different lines in Dawn

Store Design
, , , , ,
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/c/shopify-design/change-heading-font-size-on-mobile-only/m-p/1463639/highlight/true#M385643

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