Font size too small on mobile device

Support
#1

I’ve looked at a number of similar posts, and tried to add in custom css code to make the font size bigger when viewed on mobile. But with little success.

Here is the recent css code just added:
.entry-header, .entry-content {
font-size: 28px;
}
@media(max-width: 767px) {
.entry-header, .entry-content {
font-size: 14px;

Can you please advise on how I can modify the code to make the text size bigger on smaller devices like mobile.

#2

Hey @marketimpress,

Our theme does have a global responsive text option so you don’t need custom CSS. And, we do not provide support for fixing custom CSS or enhancements.

Please remove the custom code and use set our theme’s Root Font Size per screen size in X/Pro > Theme Options > Typography.

I’d also recommend looking at the rest of the Typography options so you won’t have to code.

Thanks.

#3

That is what I originally started with, but on mobile the font size is too small to read. Thus my search for an alternate solution.

I’ve removed the code and gone back to the stepped issues, but still have the same issue.

#4

Hey @marketimpress,

Did you try setting the Font Size (SM) and Font Size (XS) to a large value? If so, did you explore other Typography options as suggested previously? If so, you must have set the Content Font Size too. Did that not work?

If the Theme Options doesn’t work, you most probably have a custom CSS overriding the font size, please temporarily remove all the custom CSS in your site and give us WordPress Admin in a Secure Note so we could confirm that the Theme Options are not working.

Thanks.

#5

I’ve tried and it doesn’t affect mobile. I’ve been playing around with the Home and Services Page, and I can’t set the font size to 22px and it looks virtually the same on desktop, but I’d like it to truly be responsive on mobile.

Please take a look at my code and let me know what is affecting it.

If you go to the About Us page you will see the issue on mobile.

#6

Hi @marketimpress,

You have correctly setup Root Font size Typography settings on Theme Options.

It is not responsive because you are not using this settings. You have set your text font size manually to 22px. That is not responsive and it will not follow your Root FONT SIZE settings. You need to use EM or REM on font size to make this work. See this: https://screencast-o-matic.com/watch/cqlle6vcO1

Please edit your text element. Replace current 22px font size to 1em instead so it will inherit the root font size settings.

To understand these font size units, please check this article.

Hope this helps.

#7

Thank you so much for the link to that article, it greatly helped me to understand the differences between css font sizes.

I’ve adjusted accordingly and it looks great!

#8

Glad we could help.

Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.