[Resolved] Author pages somehow have a different container width and don’t know how to fix

[Hugo]

It’s easiest to explain by going to the website (which the admins can see).

For the normal pages, the content is contained nicely. But when I open my author pages, the content is stuck to the far left side of the browser with no margin or anything.

I tried to check every page of the customization area, but couldn’t find anything.

Thanks in advance.

[David]

Hi there,

can you disable Autoptimize so i can take a closer look

[Hugo]

Yes, I just disabled it. Thanks!

[David]

There is a script that is breaking the layout. But i cannot see where it comes from.
Apart from that i can see a bunch of errors in the console mostly related to Media vine.

Can you debug by disabling all other plugins aside from GPP

[Hugo]

yes, I’ll create a copy as a staging site, and will disable all plug-ins one by one. I’ll keep you updated.

Thanks for your time, David.

[Hugo]

I just created the staging site, and deactivated every single plug-in I had, one by one. After each deactivation, I emptied all caches and reloaded one of my author pages to see if it had been fixed.

With all the plug-ins deactivated, the content on the author pages is stuck to the far left side of the browser without adhering to the site-wide container.

Is there anything else that I can try?

[David]

Any chance you can share a link to the staging site ?

[Hugo]

Yes, but it’s protected by password. How can I send you the password privately?

[David]

You can send URL and Login via the Account Issue form:

https://generatepress.com/contact/

Please include the URL of this topic so we can track

[Hugo]

Done. It should be received.

Again, there are not plug-ins activated anymore on the staging site, so the formatting looks off. But the original issue still remains: for every page on the website, the container width and spacing is adhered to, except for the author pages, where the content is glued to the left of the window without any spacing.

[David]

Ok – its this CSS you have in you child theme:

.author, .page-hero-gravatar {
    display: inline-block;
}

[Hugo]

Ah okay, it’s fixed now. Maybe good to know for your team as well:

I initially added that particular CSS from the example page in your page hero documentation: (https://docs.generatepress.com/article/page-hero-examples/).

This mentioned the code that I used, but apparently messes up the container width for the entire .author page.

I removed the .author class from the CSS as follows:

.page-hero-gravatar {
    display: inline-block;
} 

It’s fixed now and looks nice again! Thanks for the support!

[David]

The original CSS used this selector:

.page-hero .author, .page-hero-gravatar

Without the .page-hero selector it targeted the .author body class.
So if the CSS isn’t changed its fine. But we may review it to stop accidents.

Glad to hear its resolved!

[Author]

Posts