[Resolved] My Author Page is aligned left and the rest of the website is aligned centrally

[Tom]

Hi,

I’ve spent several hours trying to resolve this, but cannot find a solution. I’d really appreciate some suggestions as to how to fix it.

The entire website is aligned centrally, but when you click on an author name and go to

mydomain.com/author/{author-name}

The website becomes aligned left in the browser.

Thank you!

[Leo]

Hi there,

Very strange indeed.

Can you try #1 here to eliminate any plugin conflicts first?
https://docs.generatepress.com/article/debugging-tips/

Make sure to clear all caching plugins you might have after disabling all other plugins.

Let me know 🙂

[Tom]

Thanks Leo, and sorry for the delay. I finally managed to do what you suggested above, with some interesting results.

So, I did the following:

1) Create a new staging site on on a new URL at SiteGround.
2) Disabled all the plugins except the three GeneratePress ones.
– CodeSnippets 2.13.3
– GP Premium
– Simple CSS

The problem still existed at this point. So I did this:

3) Disabled Simple CSS

The problem went away.

4) I assumed I must have done something wrong with the CSS I’d copied from the GeneratePress documentation, so I checked it and ran it through a validator. Which said “Congratulations! No Error Found.”

5) I then disabled Code Snippets as well (so I only have two plugins enabled: GP Premium and Simple CSS). The problem persisted.

6) I then emptied the CSS from the Simple CSS plugin, and saved with no CSS. The problem went away.

7) Found the cause. I realised that some CSS I copied from Example 2 here was messing something up. So I removed the CSS and it is fine now.

Specifically, it was this:

.page-hero-gravatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 0 0;
}

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

I left all the steps in in case someone else has a problem like this.

[Leo]

Ahh ok. Are you still using the page hero?

If so removing the .author part should fix the issue:

.page-hero-gravatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 0 0;
}

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

[Tom]

I wasn’t, but I may do with your fix. Thank you 🙂

[Leo]

Sounds good. Let me know if you notice more issues with the style if you do decide to use the page hero.

Should just need some small tweaks in CSS.

Thanks for bringing this up!

[Author]

Posts