How to make site title smaller in mobile devices?

[stevetheadi]

Hi

the title of my site https://www.broughtonschoolofmotoring.com/ looks fine on desktop size screens but looks too big in mobile size devices.

How can I adjust the size?

And can I ask a second question?

At present, I have CSS in three different locations: Global CSS, Additional CSS and some CSS added via the Simple CSS plugin. I would like to combine these files into one. Would that cause any problems and where should the combined CSS be best placed? In Global CSS or in the style.css file in my child theme? Thanks

[Prasant]

Hello Steve,

Thanks for asking.

You can add following CSS under X > Theme Options > CSS to change the title size on mobile:

@media only screen and (max-width: 600px) {
    .masthead-stacked .x-brand {
    font-size: 16px;
}
}

I suggest you to combine all the CSS and place under X > Theme Options > CSS.

Thanks.

[stevetheadi]

That works

Thank you!

[nabeel]

Hi again,

Glad it worked. To learn more about media queries you can checkout https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Cheers!

[stevetheadi]

Thanks! Great support, as usual!

[ruenel]

You are most welcome!