How can I fix the mobile text issue on the main header?

kozacashmere
Visitor
3 0 0

The text on the main header is "Koza Cashmere", but the text on the mobile version shows up as:
Koza Cash

   mere

 

The second half of Cashmere gets moved to the next line.

 

How do I force the mobile site to move the entire second word?

 

Thanks.

 

Site: Kozacashmere.comMobile site screenshot.pngregular site.png

Replies 4 (4)

kazi
Shopify Partner
582 87 109

@kozacashmere  add this css  to assets > base.css

 

@media screen and (max-width: 749px) {

 

h2.banner__heading.h0 {
font-size: 2.9rem;
}

.banner__box {
padding: 4rem 1rem;
}

 

 

}

▶️ If you need more help with your Shopify store
Speed Optimization | Theme Customization ? ☎️ WhatsApp ✉️Email Skype: kof.bd

kozacashmere
Visitor
3 0 0

I added the above text by cutting and pasting into the base.css file before the last }

 

I saved the file and checked and the word wrap still splits the word on my cell phone.

 

Just noticed that if I turn my phone to landscape the page loads without the funny word break.

 

Also, when I paste the text into the base.css I noticed that it does not have the indents that the other entries have.  Are those indents just to make reading the file easier or do they have some significance?

 

kazi
Shopify Partner
582 87 109

You should put it end of file not inside the last }

▶️ If you need more help with your Shopify store
Speed Optimization | Theme Customization ? ☎️ WhatsApp ✉️Email Skype: kof.bd

kozacashmere
Visitor
3 0 0

I put it at the end of the file.

 

Nothing changed.

 

Thanks for your continued assistance