Horizon: Anyone know why Hero line-height doesn't work?

Hi there,

Starting to test Horizon but can’t seem to get line-height changes to display in the Hero block.

Consider the following images…

  • Secondary text is set to H4
  • H4 is set to ‘tight’ in theme settings

The secondary text looks way to tight so we changed the line-height setting to ‘Loose’ - but no change…

Have tried a bunch of settings, page refreshes, clearing cache etc but line-height setting changes seem to make no difference.

Questions

1.

Does anyone know how to make the settings work or is there a hidden manual control for line-height somewhere?

2.
If anyone from Shopify is here, why is there still no Strikethrough in text editors? Strikethrough is mandatory, especially in a promo hero - e.g. was $299 now $199. I mean, you’re an ecommerce platform - even your forums have strikethrough! We’ve been requesting this since 2015 (10 years) no joke. Except now it kinda is - right?

Any help much appreciated. Cheers, Ben

Hi @Ben31

You can try to follow these steps to adjust the line-height in the Hero block:

Step 1: Go to Customize in your Shopify admin, then navigate to the Hero section.
Step 2: Add the following CSS code to the Custom CSS area (see attached image: IMAGE ). You can adjust the line-height value as you wish:

rte-formatter h4 {
line-height: 40px !important;
}

Save your changes and refresh the page to see the effect.

Let me know if you need further assistance!

Best,
Felix

1 Like

Thanks so much for this but I want to avoid !important hacks on basic stuff like line-height - ya know?

Does anyone know if this is a bug or is it another strange Shopify design choice? I couldn’t see Horizon on github to raise an issue.

@Globo So have tried your suggestion thanks but nothing changes - this should work right?

rte-formatter h4 {
  line-height: 100px !important;
}

Have added it like normal - to the custom CSS area of the hero element

In the end, I had to add an h4 override in theme settings overall before anything would work…