[Edward]

Please see http://www.zohnlaw.com. Font sizes on tablet and phone are too large. How do I make text show up better on mobile devices.

Could this have something to do with custom CSS I added to make the fonts smaller on the computer?:

/* For All content */
body {
font-size: 14px; /* Size of Font */
line-height: 22px; /* Line Height of Font */
}

Regards,
Ed

[Pratik]

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:

[Pratik]

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

[Edward]

Pratik,
Thanks much.
Can we also make the headers smaller on mobile devices?
Thanks,
Ed

[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

[Edward]

Partik,
I asked how to reduce headers on mobile devices.
But you raise another question: if there are two lines in custom CSS, one with max-with of 767 and font size of 12px, and another with max-width of 991 and font size of 14px, what is the priority? Will tablets have 14px and phones 12px?
The size of the headers, however, was my original question.
Thanks,
Ed

[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

[Edward]

Pratik,
By “header” I mean the font size of the introductory header in the “Content” section of the layout. If you go to my front page it’s the part that says “Welcome to Zohn & Zohn, LLP – Attorneys.” I don’t know which header sizes (H1, H2, etc.) attach to each of the elements.
Thanks,
Ed

[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

[Edward]

Pratik,
Thank you, this worked.
I would be helpul if you published a “map” saying which tags affect different text areas. Either that, or make it modifiable from within the theme.
Thanks,
Ed

[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

[lanretobi]

helo pratik, i used 980px for media screen to increase font size for mobile screen but i dont want this on a tablet i want a destop font size on tablet. pls how do i do this?

[Pratik]

Hi @lanretobi,

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

[lanretobi]

@media screen and (max-width: 980px) {
body {
font-size: 44px;}
i used 980px for mobile but i dont want this to affect a tablet’s screen. i want the fonts on tablets to be thesame as desktop fonts. thanks Pratik

[Pratik]

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]

seems you dont understand what i mean Pratik, i said i want the change to affect only mobile phones but not tablets. let the font size on tablet be thesame as desktop but only biger on MOBILE PHONES.

[Mahesh]

@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]

not on tablet and desktop, font-size: 44px for mobile phone only pls. thanks

[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

[lanretobi]

THnaks i have been able to fix it myself. pls i want to change my font style and family to Nato or Calibril via css. can you help me out pls? thanks

[Author]

Posts