Changing font size on main heading page just on mobile

• 

  robertovidiellahuguet · Member · Nov 14, 2019 at 1:16 pm

  • Copy link
  • Add topic to favorites

  First of all, hi everyone.

  I’m expecting to upgrade my page to premium and therefore be able to use CSS to change the Title Heading (name of the web below the logo) font size just on mobile devises so it keeps on one line and don’t change to two lines.

  Not sure how to do it, and what would be the code to do so.
  I’m using the “Twenty Seventeen Theme”.

  Any help would be very appreciated.

  Thank you and sorry in advance about my english!

  The blog I need help with is: (visible only to logged in users)

• 

  kokkieh · Staff · Nov 15, 2019 at 5:31 am

  • Copy link

  Hi there,

  This is the code you’d use:

  /* Reduce site title font size on mobile */
  @media screen and (max-width: 30em) {
    .site-title {
      font-size: 1rem;
    }
  }