[Resolved] Desktop v. Mobile Font

Home Forums Support [Resolved] Desktop v. Mobile Font

Home Forums Support Desktop v. Mobile Font

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #619890
    Zad

    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.

    GeneratePress 2.1.3
    GP Premium 1.6.2
    #620006
    David
    Staff
    Customer Support

    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

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.