[Resolved] Different Page Header Element for Mobile

[Laura]

Hello –
You have all been very helpful in the past. I am trying modify a page header in mobile but I can’t figure out the name of the header since all the updates. What is the header on this page called? I would like to increase the font size on mobile, or maybe swap with a different header.

Thank you.
Laura

[Leo]

Hi Laura,

Doesn’t look like you gave the page hero a name.

You can change the size of h1 and h2 on mobile like this though:

@media (max-width: 768px) {
    .page-hero h1 {
        font-size: 20px;
    }
    .page-hero h2 {
        font-size: 15px;
    }
}

If you want to change it on that page (homa page) only, then it would be:

@media (max-width: 768px) {
    .home .page-hero h1 {
        font-size: 20px;
    }
    .home .page-hero h2 {
        font-size: 15px;
    }
}

Let me know if this helps 🙂

[Laura]

Thanks, Leo! You’re right, I didn’t name it. But I thought somewhere it might have a post id or name automatically. Say- if I needed to alter something in one particular page header. Couldn’t find that anywhere though.

Thanks as always!
Laura

[Leo]

No problem 🙂

[Author]

Posts