Archived topic

different font sizes for different screens

5 replies · Started by anabella on March 7, 2019

Viewing posts 1–6 of 6

March 7, 2019 at 4:46 am #831545

Hello! I want to set different font sizes for different screens, and I was able to do it for headings (through appearance > customize > typography), but I couldn´t find this option for paragraphs. Basically I want the font size for paragraphs to be 18px for desktop, 17px for tablets and 16px for mobile.
Thanks in advance

March 7, 2019 at 4:55 am #831562

Hi there,

some CSS like this:

@media (max-width: 767px) {
    /* CSS in here for mobile only */
    body {
        font-size: 16px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    /* CSS in here for tablet only */
    body {
        font-size: 17px;
    }
}

March 7, 2019 at 5:12 am #831575

Thanks David, it´s working great for mobiles, but for tablets I´m still getting 16px instead of 17px

March 7, 2019 at 5:22 am #831582

I tweaked the code above down 1px on both :)

March 7, 2019 at 5:44 am #831603

Thanks a lot David!! :) All good now

March 7, 2019 at 5:52 am #831608

Awesome - glad to be of help

This archived topic is closed to new replies.

Start building better websites today.