Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1257629

    Hey guys,

    I have an issue with Heading (H1, H2, H3..) font spacing on mobile, for some reason it’s different and much bigger than the heading font spacing on desktop. Since it looks quite bad on mobile, I’d like to fix this and set the same font spacing value (for headings) as on desktop. How can I do this?

    Many thanks for your help!

    #1257759

    Hey bizzonwheels5,

    Best regards,
    Victoria

    #1257909

    Hi Victoria,
    Thanks for your reply. No, I am not talking about the letter size, otherwise known as font size, which is easy to adjust from the text editor.
    I am talking about the space between letters, this is what font spacing means.
    When it comes to my website’s headings (headings means titles, H1, H2, H3…), the space between letters is larger on mobile than on desktop, and I would like to correct that (meaning I would like to use the same value on mobile as on desktop. Please see attached images for clarification.
    Thank you!

    #1258178

    Hi,

    Thanks for the clarification and screenshots. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
    h1, h2, h3, h4, h5, h6 {
      letter-spacing: 0.5px;
    }
    }

    Best regards,
    Rikard

    #1260697

    Hi Rikard,

    Thank you for the solution and my apologies for the late reply. Unfortunately, the code provided did not work so the issue persists. Many thanks for helping me figure this out. Have a great week!

    Elena

    #1260910

    Hi Elena,

    The CSS I sent you is applying on your site, if you want different results then please adjust the value.

    Best regards,
    Rikard

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