Responsive line-height CSS?

[KEXINO]

Hi all,

I have a responsive text headline set as follows:

calc( 30px + (90 - 30) * (100vw - 320px) / (1500 - 320))

While this works great for large viewports, the text line-height needs a little tweaking for viewports of 767px and below.

I tried adding a class moblineheight to the headline element as follows:

@media (max-width: 767px) {
    .moblineheight {
        line-height: 1.1 !important;
    }
}

But that didn’t work. Could someone please point me in the right direction?

Thanks in advance.

[tristup]

Hi @KEXINO,

Thanks for reaching out.
It might be a different reason behind that the custom CSS didn’t work for you. Although we don’t investigate the custom CSS issue, still I would like to see the URL where you are having this issue to guide you on this.

Thanks

[KEXINO]

Thank you!

URL is in a Secure Note.

[tristup]

Hi @KEXINO,

Your custom CSS selector would like the following, I would suggest you update your code to apply to the exact selector.

@media (max-width: 767px) 
{
    .moblineheight .x-text-content-text-primary
    {
        line-height: 1.1 !important;
    }
}

Hope it helps.
Thanks

[KEXINO]

Perfect!

Thank you so much - really appreciated.

[tristup]

Hi @KEXINO,

Glad that we are able to help you.

Thanks