[Resolved] Line height not working in a template

Home Forums Support [Resolved] Line height not working in a template

Home Forums Support Line height not working in a template

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

    The changes I make in the Customiser for the font under Customising > Typography > Body is being correctly applied throughout my site, including in my template for media attachments.

    But there is one anomaly, which is the Line Height from the customiser, is not working for text inside an ACF Repeater type field in this template. The font size is changing in there but the line height stays bunched up.

    I am using the Customiser defaults for Line height i.e. 1.5, as I understand this automatically maintains the ideal line spacing regardless of changes in the font size etc.

    #1679707
    Elvin
    Staff
    Customer Support

    Hi there,

    You have this CSS on your Simple CSS plugin:

    .accordion-item-body-content {
        padding: 1rem;
        padding-bottom: 0.1rem;
        line-height: 1.5rem;
    }

    This line-height value wins in precedence over the customizer settings so this 1.5rem will apply regardless of what value of line-height you’ve placed in the Typography Settings.

    A wise man once said:
    "Have you cleared your cache?"

    #1679859
    Matthew

    Hey yes taking line-height: 1.5rem; out of .accordion-item-body-content fixed it and restored well balanced line spacing. But I don’t understand why having it in there messed things up, because it’s the same value of 1.5 that I have in my Customiser after all. Maybe it’s the use of rem.

    Problem solved!

    #1679964
    David
    Staff
    Customer Support

    Hi there,

    REM stands for Root EM. When you use REMs it bypasses any parent element font size and grabs the font size defined on the HTML element which ( unless overwritten with CSS ) is 16px on the majority of Browsers.

    So for REM units – the value that is calculated will also be based upon this static value.

    Whereas EM inherits its value from the parent element.

    #1680029
    Matthew

    I see so it was basing the line height value (of 1.5) on a font size of 16px rather than the 19px font size set in my customizer? meaning it would be a relatively reduced line height

    #1680094
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.