[Resolved] .page-header has a wrong offsetWidth on the category page

[Manuel]

Hi Tom,

I’m using Yoast for my breadcrumbs. Everything is working fine except at the category page.
The .page-header section hasn’t the same width as the rest of the page. It’s moved a bit to the right.

It seems to be a bug. Could you please have a look at it?

[Tom]

Ah yes, you’re using the .page-header class, which has those adjustments made to it so it works with the columns. You can see it working in the section below.

You can:

a) Remove the page-header class and add your own class.
b) Add your own class and use it to re-position the page-header class in this specific instance.

Let me know if you need more info 🙂

[Manuel]

Thanks for your answer!

Could you please provide me a bit more info. I tried to fix it but it didn’t work. I prefer the second option (add own class to re-position)

———————————-
Please let me know if I should open a new Thread for this Question:

Normally I don’t like to show the author and the date of a post, but the Google Search Console would prefer it. Do you know if there is an option to provide Google these information while it is hidden to the user?
Do you maybe also know if it’s possible that the current date is always the post date (or s.th. like current date – 1 week/month)?

Merry Christmas! I’ll hope you spend a good time with your family 🙂

[Tom]

Once you add your class, add this:

.page-header.your-class {
    margin-left: 0;
}

A new thread would be great.

Thank you! 🙂

[Manuel]

Thanks!

One more Question: Would you recommend to do this with a child theme?

[Leo]

Depends how much custom CSS and code you are looking to add.

You can see more info in these couple articles:
https://docs.generatepress.com/article/adding-css/
https://docs.generatepress.com/article/using-child-theme/

[Manuel]

I added now some additional css…so it looks like:

.page-header.modified {
margin-left: 0;
}

But how can I achieve it to add modified as a class to the page header? (–> class="page-header modified")

[Tom]

Exactly like that 🙂

[Manuel]

Hi Tom,
I think you misunderstood me 😛
I am not that familar in manipulating the given wordpress theme code. So what do I need to do to add the modified class to the <div> container.

Thank so you much for your help 🙂

[Tom]

I’m assuming you added code to GP Hooks in order to display the breadcrumbs. That’s where you’ll see the page-header class, which you can then add your modified class to.

[Manuel]

Oh, you’re right 🙂
Everything is working finde now!
Thanks

[Tom]

You’re welcome! 🙂

[Author]

Posts