Responsive jumbotron header text

Hi there!
First, i’m sorry if anyone else had already ask this question but can’t find any solution yet.
So, there is my problem:

I would like to know if there is possible to make really responsive the big title in the jumbotron header.
Here is the computer version: milabo.fr
On the smartphone version, the text is badly broken and can’t fix it by myself.

Any idea?
Thanks!

Hello there,

I hope you are doing well today.

You can use the following CSS code to reduce the heading height by going to Appearance > Customize > Additional CSS and pasting it there.

/*Heading height*/
@media screen and (max-width: 1000px) {
#header.header-front-page .bottom-header h1 {
    font-size: 40px;
}
}

Best Regards,
Support

Thank you so much! But…
It still doesn’t working, same issue :frowning:

Have a nice day too :wink:

Hello there,

Please try using the following CSS instead:


/*Heading height*/
@media screen and (max-width: 900px) {
#header.header-front-page .bottom-header h1 {
    font-size: 40px;
}
}

Best Regards,
Support

And… It works!
Thank you SO MUCH!

Hello there,

Great, 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