[Resolved] Change H2 and other Headers for Mobile

[Kyle Calzaretta]

trying to reduce the H2 and font-sizes for mobile and I can’t seem to get the H2 simple css tags to work. Can you please assist?

Thanks!

@media (max-width:769px) {
h2.gb-headline.gb-headline-3259c00e.gb-headline-text { {font-size: 15px}
}

[Fernando]

Hi Kyle,

Are you targeting specific H2s or all H2s on your site?

Moreover, can you point us to where we can specifically find the Header your trying to target here: h2.gb-headline.gb-headline-3259c00e.gb-headline-text

[Kyle Calzaretta]

I’d be okay doing the entire site – modifying H2 and also regular body text to smaller version for Mobile.

The text specifically above is referencing “Elders of the Oasis” H2 . Also looking to decrease size of body font for mobile only.

Thanks again,

[Fernando]

I see.

If that’s the case, go to Appearance > Customize > Typography, and add a new Typography.

Set the Target Element to Custom – body .grid-container h2. Then, set the font settings for mobile.

Example: https://share.getcloudapp.com/X6u5D8gw

[Kyle Calzaretta]

That worked, thank you. How would I modify the body (Paragraph) text as well using that same custom method?

[Fernando]

You can try Body or Custom – p as the target element.

[Kyle Calzaretta]

Thanks – figured that one out!

[Fernando]

You’re welcome, Kyle!

[Author]

Posts