Site title letter spacing and mobile letter size

  • Resolved brokendown

    (@brokendown)


    7 years, 4 months ago

    Hi,

    Using some code I found in here I have managed to get my site title to show nice and big on computer screen but it’s resizing way too small on mobile.

    How can I force the site title to fit/fill the screen width on mobile?

    Also, is there a way I can target the spacing between letters in the site-title to bring them closer together. I’m using a custom font for my band logo lettering but the letters are much too far apart. Reducing the space between them somehow would be brilliant.

    Here is the code I am using already for the letter sizing:

    @media all and (min-width: 62.5em) {
    .site-title {
    font-size: 200px;
    }
    }

    Please also note that this is the ‘Morning’ theme variant, not Apex itself.

    Thanks in advance ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Yea so this code is using a media query that will only target the screen when it’s 62.5ems or wider. In this case, that’s 1000px or wider:

    @media all and (min-width: 1000px) {
  .site-title {
    font-size: 200px;
  }
}

    If you want to target mobile devices, you can update the code like this:

    
.site-title {
  font-size: 50px;
}
@media all and (min-width: 1000px) {
  .site-title {
    font-size: 200px;
  }
}

    That will set the site title font size to 50px, but if the screen is 1000px or wider, it will be 200px instead. You can add more media queries if you want additional control over scaling the font from 50-200px. The reason for doing this is that the 200px size will look good on desktop but much too large on mobile.

    And you can reduce the space between letters in the title like this:

    .site-title {
  letter-spacing: -2px;
}
    Thread Starter brokendown

    (@brokendown)

    Brilliant!

    Thanks Ben ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Site title letter spacing and mobile letter size’ is closed to new replies.