How to make heading text smaller in mobile devices

Support
#1

Hi

The headings at the top of my home page - www.broughtonschoolofmotoring.com - look fine on a desktop but too big on a mobile phone sized screen.

I’ve looked at the responsive text shortcode article - http://demo.theme.co/integrity-1/shortcodes/responsive-text/ - but I don’t understand how to use the code!

Can you give me a VERY simple guide to using the responsive text shortcode or (easier?) a CSS based solution?

Thanks!

Update: found the answer to my original question. This video : https://www.youtube.com/watch?v=MG3Hn-PUkiA

It explains how to use responsive text shortcode on headings :slight_smile:

But I would also like to make the title of the website - Broughton School of Motoring - responsive. Can’t use a shortcode for that.

Can you help?

#2

Hi,

You can use css media query for that.

eg.

@media(max-width:767px) {
    .masthead-stacked .x-brand {
          font-size:30px;
   }
}

@media(max-width:480px) {
    .masthead-stacked .x-brand {
          font-size:25px;
   }
}

You can add the code in X > Launch > Options > CSS

For more information regarding this, you may refer to the links below

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Hope that helps

#3

That works :slight_smile:

Thanks!

#4

You’re welcome!