Font Sizes on Tablet and Phone

Hi @Edward,
Your custom css sets font size for all devices.
If you want to just add custom css for mobile/tablet devices, use something like following:

@media screen and (max-width: 991px) {
    body {
        font-size: 14px;
    }
}

That this does is applies font size css to devices with screen size less than 911px.

You can edit the size of font as per your need.

Regards,
Pratik

Hi @Edward,

Do you mean reducing size even more for smaller devices? You can do following:

@media screen and (max-width: 767px) {
    body {
        font-size: 12px;
    }
}

Assuming mobile devices have screen width less than 767px. You can reduce the size to fit your needs.

Regards,
Pratik

Hi @Edward,
I misunderstood about the header. I thought you were referring to fonts again. Yes, as long as you set 991 followed by 767, it will take tow different css for different screens.

By reduce headers, I do not know what you mean, do you mean to reduce font size of fonts in header, or anything else?

Please let me know.

Regards,
Pratik

Hi @Edward,
This is page title. Same @media screen and (max-width: 767px) { rule applies here as well, if you want different sizes for different screen sizes.

.page .content-area .entry-title {
    font-size: 25px;
}

This will reduce size of the title on all pages/posts.

If you want it to affect only homepage, then you can use following code:

.home .content-area .entry-title {
    font-size: 25px;
}

Regards,
Pratik

Hi @Edward,

I am glad the solution worked.

Thank you for the suggestion. But as goog as it sounds, it will be nearly impossible to list out all the element tag’s ids and classes.

If you want, there is a nifty tool (addon) called firebug that will let you view the element’s id and classes. However, this is a developer tool, so will require some expertise on HTML and CSS.

Regards,
Pratik

Hi @lanretobi,

Can you post in your code so I can check it?

Hi @larentobi,

You can try following code:

@media screen and (max-width: 500px) {
    body {
        font-size: 44px;
    }
}

This will make the font size on mobile devices 44px.

Regards,
Pratik

@lanretobi: Please post in your site url. And please clarify on whether you want to have font-size: 44px on desktop and tablet or mobile?

Regards,
Mahesh

@lanretobi: The one @pratik has answered above is correct. Please post in your site url, we’ll need to check your site for the issue.
https://catchthemes.com/support-forum/topic/font-sizes-on-tablet-and-phone/#post-107717

Regards,
Mahesh