Okay
  Public Ticket #2182736
Mobile Site Letter Spacing (H1 and H2)
Closed

Comments

  • Nik started the conversation
    October 13, 2019 at 9:54am

    Hey,

    I have my letter spacing set in my H1 and H2 headers at 20px. However, on mobile sites this causes the fonts decrease dramatically, and on some headings they don't fit on the page at all.

    Is it possible to have a different letter spacing for these two headers on mobile sites?

    Thanks,

    Nik

  •  8,992
    Tahir replied
    October 14, 2019 at 2:33pm

    Hey Again,

    Try using the New Responsive Typography Settings in here : http://prntscr.com/gnf951 .

    Best.

    ThemeNectar Support Team 

  • Nik replied
    October 14, 2019 at 3:22pm

    Hi Tahir,

    Thanks for this. I've tried this for these titles and it doesn't quite create the desired effect (It doesn't seem to reduce the letter spacing, or if it is, it isn't reducing it enough and then the font is too small).

    Are there any alternate options for reducing just the letter spacing to 1px (or similar) on mobile sites?

    Thanks!

    Nik

  •  8,992
    Tahir replied
    October 15, 2019 at 10:36am

    No i am afraid this would have to be custom coded as you are using a unusual letter spacing .

    Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    @media only screen and (max-width: 999px) {
    h1,h2 {
        letter-spacing: 0px !important;
    }
}

    Thanks


    ThemeNectar Support Team 

  • Nik replied
    October 15, 2019 at 11:59am

    Amazing! This worked perfectly. Thanks!