[Shari Gilford]

I have header titles on each page on my website. They look nice on a full screen view. However, on phone view, the font is too large and the word breaks up over a few lines, which is unacceptable. I don’t want to decrease the font size. I saw that I can hide this text on a phone view, but I’d like it to show up. Is there another way to make it responsive so it doesn’t split up words? This is happening on the Home page, the Financial Commitment page, and the Get Involved page.

[BoldGrid Support]

Hi Shari,

Thanks for contacting BoldGrid Support. It sounds like you could benefit from using Responsive Fonts – you can enter a different font size for 4 screen sizes. We have a YouTube video showing how to use the control: https://www.youtube.com/watch?v=_kn0T6GA1GI

Please let me know if this solves your issue.

Thanks,

Nicole P.

[Shari Gilford]

Hi Nicole,
This is very helpful. However, it seems to only change the font size of the headers throughout the page, which I don’t need to do. I don’t see a place to choose which heading size to change either, for example, Heading 1, Heading 2, etc. It just says Heading, so I’m not sure how to choose the different heading sizes. On my website, I changed the page titles on each page to a larger font, and that is not showing up as a selection in the responsive text menu. For instance, when I hover over this page title, it says the font is Heading 1. However, I had changed it by going to the font menu and increased the font size manually to 60. That is only for the title on each page, not the headers within the text of the page. So I’m still not sure how to make the title font, which is currently 60px, to a small font in the responsive settings since I had changed the size manually. I don’t want to mess with the regular headings (which are Heading 3), just the page title on each page. Thanks again for any further clarification of how to do this!

Shari

[BoldGrid Support]

Hello,

Yes if you used a manual override to change the font size, then the responsive controls will not work. There is only 1 heading input as we have code that changes it to all 6 heading sizes – it scales each heading based on one value to keep everything consistent. I’d recommend removing the hardcoded value and letting the responsive fonts do what they naturally do.

Thanks,

Nicole

[Shari Gilford]

Okay, thank you. I’ll try what you suggested. How do I “undo” the font size manual change back to default?

[BoldGrid Support]

To undo the font size override, open the Custom Page Header and click on Code view at the top of the editor (you start in Visual). Find the code for the H1 element and delete the font-size: 60px; (including the semicolon). Then save the Custom Page Header and the responsive font sizing will take effect.

Thanks,

Nicole

[Author]

Posts