[Resolved] Line height not working in a template

[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.

[Elvin]

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.

[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!

[David]

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.

[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

[David]

Thats correct 🙂

[Author]

Posts