Archived topic
Gravatar Image Position
10 replies · Started by Dev on October 18, 2022
Hello,
Please check the screenshot.
Also, check the below reference website page. I want to place the author's (gravatar) image like that.
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.
Hi,
I did what you said, but the image is coming toward the left.
Can you please check this screenshot? https://prnt.sc/aJ6e6PSQW5fl
You moved it inside the Container with your post meta.
Instead you need to add another container before that, and move the image inside.
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
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
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.
???????????
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;
}
Hi,
It's done as needed thanks, man :)
Glad to be of help!