resize jumbotron titles on mobile device

Illdy
1

Hello, please can you help.

I wonder if it is possible to change the way the jumbotron title (the three words) display on a mobile device? Currently, they font is so large it wraps even a short word so it’s hard to read and looks a bit silly. Is it possible for the font to reduce in size so that it fits a small screen better?

The only way I could find to change it was to reduce the font across all devices, but I don’t want to reduce the font size on a PC/laptop size screen.

Thank you,
Becky

2

Hello there,

I hope you are doing well today.

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

/*Mobile  font size*/
@media screen and (min-width: 1001px) {
#header .bottom-header h1 {
    font-size: 50px;
}
}

Best Regards,
Support

3

Hello, thank you for such a quick reply, but that didn’t work unfortunately. I’m using hosted wordpress on 1&1, so I don’ have the navigation path you suggest. I’ve pasted it under the Additional CSS section though, so it should have picked it up. It didn’t do anything!

4

In case it helps, this is the website: http://ciprojectsltd.co.uk/

5

…actually it did do something, it made the font on the PC smaller, but kept it the same size on a mobile!

6

Hello there,

Please replace the previous CSS code with the following:

/*Mobile  font size*/
@media screen and (max-width: 1001px) {
#header .bottom-header h1 {
    font-size: 50px;
}
}

Best Regards,
Support

7

Yes that worked! Thank you :slight_smile:

8

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support