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 August 18, 2017 at 10:00 amHi,
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.Thanks for your quick reply.
Yes, on all mobile devices please.
Best,
RenéJuanfra Aldasoro August 18, 2017 at 2:14 pmHi 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,
JuanHi 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 August 21, 2017 at 9:09 amHi 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.Thanks for your confirmation…I’ll try it for the next customizations in CSS!
Juanfra Aldasoro August 24, 2017 at 12:35 pmHI Rene,
Thanks for the follow-up.
That sounds perfect! 🙂
Have a nice day,
Juan
This topic is marked as resolved
Only the topic author can re-open this thread.