Home Forums Community Forum Want to Make H1 Titles Smaller on Mobile

Tagged: ,

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • noraf
    Participant
    Post count: 1

    What CSS would I add to set my H1 and H2 titles to a smaller font size for mobile devices? There is no separate setting in options (feature request please!). Thank you.

    marklchaves
    Participant
    Post count: 816

    Hi @noraf,

    There are a few ways to do this with CSS.

    My preferred way is with no media queries.

    
    h1.fusion-responsive-typography-calculated {
      font-size: 10vmin !important; /* 10% of vewport's min dimension. */
    }
    h2.fusion-responsive-typography-calculated {
      font-size: 5vmin !important; /* 5% of viewport's min dimension. */
    }
    

    If you like media queries, here is one way to do that.

    
    @media (max-width: 640px) { /* Based on Microsoft's standard mobile breakpoint. */
      h1.fusion-responsive-typography-calculated {
        font-size: 3rem !important; /* 3 times the root font size. */
      }
      h2.fusion-responsive-typography-calculated {
        font-size: 1.5rem !important; /* 1.5 times the root font size. */
      }
    }
    

    Tweak the hardcoded numbers as needed.

    Shout if you have any questions 🙂

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