[Resolved] Changing Post Title

[Mohit]

Hi, I added a new element header and changed the post title container to full width. Now I want to change the font style of the post title which I can’t do as post title is <H1> tag and if I go to customize>typography>content and change from there my content <H1> tag also changes.
So, is there any way to change my post title only?

Thanks 🙂

GP Premium 1.7.2

[Leo]

Hi there,

You can give h1 in page hero a class like:
<h1 class="page-hero">page hero title</h1>

Then target it with CSS:

h1.page-hero {
    font-size: 40px;
}

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

Let me know if this helps 🙂

[Mohit]

Hi,

Thanks, it worked but in mobile view how can I make my post title font size to be displayed differently to what is being displayed on a desktop? As by adding the above code the size of my font is still big in mobile view as I created a class?

Thanks

[David]

Hi there,

you can add this CSS in addition to what Leo provided:

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

[Mohit]

Thanks 🙂

[David]

Glad we could help.

[Leo]

More info here on media query if you need:
https://docs.generatepress.com/article/responsive-display/

[Mohit]

Hey,
Thanks for all references but I am facing another problem!
My post title padding in mobile view is not displaying properly, as a result title is not looking what it is suppose to look. Same goes for meta info.

Can you give me a code to fix this?

Thanks

[David]

Hi there,

it looks like the adverts you have added are not responsive which is effecting the width of the device. You will need to fix this with the ad service provider.

[Mohit]

Hey,

I am using adsense responsive ad and it should adjust automatically. Also is there any other way to show the ad at exact same position using hooks instead of showing by page hero, the way I am showing!

[David]

Use the after_entry_title hook and set the Priority to 5

[Mohit]

Hi David,

Thanks for letting me know about this. But even if I don’t show ad below title, title in mobile view is not displaying properly, as a result title is not looking what it is suppose to look. Same goes for meta info.

[David]

In the Page Hero padding, there is a mobile icon, click that and then set your mobile padding. Currently its getting the same padding as the desktop.

[Mohit]

Yeah I fixed that, Thanks

But now when I add the ad via hook it doesn’t align itself below the title instead is floating somewhere and overlapping other things even on desktop. Have a look by yourself.

Thanks

[Mohit]

Guess I figured it out by creating a separate class for ad in the page hero.

[Author]

Posts