Font size in responsive with unexpected results

Author Posts

jassheridan March 13, 2019 at 9:22 am

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

Hey. I have set title font size using Microthemer for the event title in this page. Basically the words FREE TRIAL CLASS in each section. Looks perfect in each size in the Microthemer layout. BUT if I resize the page in my browser slowly there is a midpoint where the title font size is massive and looks weird.
Am I missing something obvious? Maybe a conflict with media query break points between microthemer and beaver builder? Any assistance appreciated. I don’t know how to inspect and diagnose this myself.
https://krav-maga.org.uk/free_trial_classs/
Thank you

Sebastian March 13, 2019 at 11:07 am

Hey,

Thanks for sharing the link. The text is larger at certain screen sizes (980px – 1200px) because your media queries don’t target that range. One option is simply to set the font-size to e.g. 22px via the All Devices tab, so that the Beaver Builder font-size (30px) is overridden.

Another option is to create a new media query via the Edit media queries popup e.g.

@media (max-width: 1199px)

What ever you prefer!

I hope that helps. Please let me know if you need further assistance with this.

Thanks,
Sebastian

jassheridan March 14, 2019 at 8:50 am

Thanks Sebastian – as per usual something simple !! I had 18 but not 18px in the AllDevices tab ☺️

Sebastian March 14, 2019 at 11:50 am

Hey,

18 without the pixel bit should have worked if entered via the font-size property field. Or were you using the custom code editor to the left of the Font property group?

Cheers,
Sebastian

You must login or register to reply to this topic.