Archived topic

Desktop v. Mobile Font

1 reply · Started by Zad on July 10, 2018

Viewing posts 1–2 of 2

July 10, 2018 at 12:02 am #619890

Hi,

I'd like to keep my desktop font (body + blockquotes) large, and my mobile font (body + blockquotes) small.

Here's what my code currently looks like

@media (max-width: 768px) {
    body {
        font-size: 18.5px;
    }
}

blockquote {
    background-color: #f4f4f4;
    border-left: 2px solid #58bad6;
    font-size: 14.5pt;
    font-style: normal;
    padding-left: 25px;   
}

I want the blockquote on my mobile to be smaller while keeping the blockquote font on desktop around 16 px.

July 10, 2018 at 3:05 am #620006

Hi there you could simply do this:

blockquote {
    background-color: #f4f4f4;
    border-left: 2px solid #58bad6;
    font-size: 14.5pt; /* set desktop size */
    font-style: normal;
    padding-left: 25px;   
}

@media (max-width: 768px) {
    body {
        font-size: 18.5px;
    }
    blockquote {
        font-size: 16px; /* set Mobile size */
    }
}

It is best to add media queries after the standard rule

This archived topic is closed to new replies.

Start building better websites today.