Preventing word wrap from breaking words when resizing window

Illdy
1

Hello, Thanks for excellent theme.

I have a question about the title text in the Jumbotron - I’ve noticed that when the window size is made too small for the text to fit, the word wrap will break words in half rather then just bumping the the entire word to the next line. Is there a way to fix this?

My site in question is www.happycathousesitting.com The text should be fine in most resolutions untill the window is reduced, when the last words (Reliable.) gets cut in half

2

Hello there,

I hope you are doing well today.

You can use the following CSS code to change the font size on mobile by going to Appearance > Customize > Additional CSS and pasting it there.


/*Jumbotron title font size on mobile*/
@media screen and (max-width: 500px)
body #header .bottom-header h1 {
    font-size: 26px;
}

Best Regards,
Support

3

Hm, that code doesn’t work for me when I put it in.

But, in anycase, I don’t want to change the size of the font and it’s not specific to mobile - I just want to prevent the word wrapping from breaking words. I’d like it to move the whole word to the next line instead of just half the word.

4

I found a solution - using the <nobr> html tags in the header text stops the words from breaking.

5

Hi,

Glad you found a fix. :slight_smile:

Let us know If you have any other questions. Please feel free to contact us again in the future regarding any other issues.

If you’re happy with our service, don’t forget to rate us: [Illdy] Reviews | WordPress.org

Thanks,
laranz.