[MattHollParticipant]

Hello.

So, I had some h2 headers going off the right side of the screen on mobile.

Digging around the forum, I found this code which worked for my iPhone.

@media screen and (max-width: 730px){
h2 {
font-size: 30px !important;
}
}

I would like to make sure that no matter the screen size, smaller or larger mobiles, that those headers are formatted to size properly on any mobile screen. Is it maybe the case that the header should size as a percentage or something instead of a fixed 30 pixel size?

One of the pages in question is here, using a custom headline and a feature headline.

http://www.hrvatskohomebrewprvenstvo.beer/recipe-gold-british-isles-pale-2016/

Thanks for any help.

[ThaiModerator]

Hi There,

Please take a look at this ticket: https://community.theme.co/forums/topic/feature-headline-not-responsive-on-mobile/#post-805418.

Hope it helps 🙂

[MattHollParticipant]

Thanks for the link.

That would require me to manually input that on each and every text element. I’d rather have a global solution so that those headers just fit on any device.

[LelyModerator]

Hi Matt,

In that case, the CSS media on your first post will work as expected. Regarding px or percentage, if you use percentage, it will be based on your content font size which is 14px. By default on integrity CSS, h2 size is 285.7% of your base content font of 14px.

Hope this helps.

[Author]

Posts