How can I prevent word hyphenation on CRAVE theme?

Store Design
1

Hi there,

How do I stop word hyphenation on CRAVE theme – it’s especially bad on mobile which looks really amateur…

www.reformedcharacters.com

Thankyou!

see here – on "unapologetically"
see here – on "unapologetically"1242×2688 501 KB

1 Like
2

It’s word breaks, not hyphenation. This is happening since the word is too big for the container it sits in so the it’s being broken and moved to the next line.

The better way to handle that would be to adjust the size of the text on those smaller screens so that large word would fit.

This css won’t be perfect and you may want to tweak it (or even add media queries to further refine when it’s used). it’s copied from the format you already use so it’s not quite how i would write the code, but at least it keeps it consistent with what you have.

h1,.h1 {
    font-size: calc(var(--font-heading-scale) * 2.5rem);
}

You could (but really dont!) also set the white-space property to nowrap but that will just put everything on one long line that will spill over the edge of the viewable window.

3

@danielhinde

sorry for that issue can you try this on for mobile device

  1. Go to Online Store->Theme->Edit code
  2. Asset->/base.css->paste below code at the bottom of the file.
@media screen and (max-width: 749px) {
h1, .h1 {
    font-size: 24px;
}
}
1 Like
4

Thankyou Ketan!

1 Like
5

@danielhinde

its my pleasure to help us

1 Like