[Rene]

Hi,

I’ve been trying to reduce the heading (h2) font size on smaller screens (@media screen and (min-width: 960px) { …and so on) , assigned a custom class, wrote custom css…but the desired font size (28px) doesn’t show.

Can you help me out with the right css code? Many thanks

[Juanfra Aldasoro]

Hi,

Thanks for writing. I hope you are doing well.

Where is that you want to put the H2 with 28px, on all mobile devices?

Best,
Juan.

[Rene]

Thanks for your quick reply.

Yes, on all mobile devices please.

Best,
René

[Juanfra Aldasoro]

Hi Rene,

Thanks for the follow-up.

You need to do the following:

@media only all and (max-width: 1023px) {
 h2, .h2 {
    font-size: 28px !important;
  }
}

Please have in mind that you don’t have any H2 on your front page, at least on the site you have shared with us.

Best,
Juan

[Rene]

Hi Juan,

Thanks for your help, works great.

I now paste it in every single page. Is it also possible to place it (just once) in ‘Theme options’ –> ‘Custom Codes & Scripts’? Because the pages don’t seem to respond to that…

By the way: It’s correct that the homepage doesn’t have H2, other pages do 🙂

Best,
René

[Juanfra Aldasoro]

Hi René,

Thanks for the follow-up.

Well that’s great 🙂 – You can set that CSS rules globally in the place you mentioned or in Appearance > Customize > Additional CSS. Pages ideally should respond to that as the rules are the same.

Best,
Juan.

[Rene]

Thanks for your confirmation…I’ll try it for the next customizations in CSS!

[Juanfra Aldasoro]

HI Rene,

Thanks for the follow-up.

That sounds perfect! 🙂

Have a nice day,
Juan