Archived topic

Mobile Header Title Issue

5 replies · Started by Moises on September 1, 2020

Viewing posts 1–6 of 6

September 1, 2020 at 7:47 pm #1427205

Hi there,

I seem to be having an issue that i have no idea how to fix!

I've set up the header title for the homepage and all works well on desktop. However, on mobile the 'Performance' text seems to be cutting off.

I've tried editing the @media query via css but it doesn't seem to be working. I'm currently running Elementor on it too.

Any help would be greatly appreciated.

September 1, 2020 at 9:31 pm #1427261

Hi there,

Try this CSS:

@media (max-width: 768px) {
    h1.hero-title {
        letter-spacing: 2px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps :)

September 1, 2020 at 9:48 pm #1427264

Hi Leo,

Added that to the 'Additional CSS' section - but no luck unfortunately...

September 2, 2020 at 2:29 am #1427463

Hi there,

you have an extra } in your CSS which is breaking the CSS see here:

.hero-title {
    font-size: 40px;
    letter-spacing: 12px;
    font-weight: 500;
}
} /* remove this bracket */

@media (max-width: 768px) {
    h1.hero-title {
        letter-spacing: 2px;
    }
}

I have commented the bracket you need to remove.

September 2, 2020 at 2:37 am #1427467

D'oh! That's fixed it.

Thanks so much guys.

September 2, 2020 at 6:35 am #1427739

Glad we could be of help

This archived topic is closed to new replies.

Start building better websites today.