Font size issue

• 

  stuarthoodlimited · Member · Nov 16, 2016 at 11:17 am

  • Copy link
  • Add topic to favorites

  Hi,

  My site title includes the word ‘fatherhood’. The font I am using (Brandon Grotesque bold, normal size) works really well on laptop and tablet, but drops the D to the line below when the site in viewed on mobile. Does anyone have any idea how I could customise the font or tracking to make it slightly smaller on mobile? I’ve tried the fonts small and tiny options, but the title really loses its impact on laptop and tablet.

  Thanks, Stuart

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

• 

  thesacredpath · Member · Nov 18, 2016 at 2:26 pm

  • Copy link

  Hi Stuart, what we can do is to use a Media Query to adjust the font size on the site title down a bit on smaller screens. I’ve used a maximum width of 480px and reduced the font size from 50px to 40px. Make sure and view on your phone and if necessary reduce the 40px until it doesn’t break fatherhood.

  @media screen and (max-width: 480px) {
    #site-title {
      font-size: 40px;
    }
  }

• 

  stuarthoodlimited · Member · Nov 21, 2016 at 12:18 pm

  • Copy link

  This is great, thank you so much.

• 

  thesacredpath · Member · Nov 21, 2016 at 7:23 pm

  • Copy link

  You are welcome.