[Resolved] Gravatar Image Position

[Dev]

Hello,

Please check the screenshot.

https://prnt.sc/0pq1dyimY2Nz

Also, check the below reference website page. I want to place the author’s (gravatar) image like that.

https://www.safalniveshak.com/long-term-investing-is-hard/

[David]

Hi there,

you will need to add the avatar image block inside its own Container Block which has the same white background.
Then you can select the Image block and set its Top Margin to a negative value eg. -50px to pull the image up so it hangs over that container.

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

[Dev]

Hi,

I did what you said, but the image is coming toward the left.

Can you please check this screenshot? https://prnt.sc/aJ6e6PSQW5fl

[David]

You moved it inside the Container with your post meta.

Instead you need to add another container before that, and move the image inside.

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

[Dev]

Hey, sorry to bother you again.

The image has come up in the center but not down to the white space’s center.

Can you please see that agin? https://prnt.sc/prldiFNbkz3P

[David]

Ok, so select that new Container Block that the image is inside.
And change Layout > Container to: Contained Width
Then in the Container Width field: 1130px
Then set its Background Color to White.

Now select the Image Block, and set its Spacing > Margin Top to -50px

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

[Dev]

Hi,

I did what you said, but still, the image is not going in the center as it’s on the below page.

https://www.safalniveshak.com/long-term-investing-is-hard/

Please check this screenshot of my site. https://prnt.sc/c7oqgrHv7E2v

I have added my site URL in the private box. Please let me know.

[Dev]

???????????

[David]

Ok, keep what you have and do the following:

1. Select the Image Block and:

i) remove the Negative Top Margin.
ii) go to Advanced > Additional CSS Classes and add: overlap-image

Publish those changes.

2. Add this CSS to your site.

.overlap-image {
    margin-top: -50px;
}

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

[Dev]

Hi,

It’s done as needed thanks, man 🙂

[David]

Glad to be of help!

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

[Author]

Posts