Archived topic
Overriding .blog-post-content-wrapper img class
7 replies · Started by Paul on December 16, 2022
Hi There,
I have the following class so I can add some margin and radius corners images within blog posts:
/*Blog post content image styling */
.blog-post-content-wrapper img {
border-radius: 1rem;
margin-top: 0.5em;
}
Although I'd like the 'Author Bio box photo' (below article content) to be a circle so I tried adding this class to the author bio image but doesn't seem to work?
.author-box_photo {
border-radius: 5rem;
}
Can you see what I'm doing wrong?
Please see link to example post in private info.
Cheers
Hi there,
Can you try setting the border-radius on the image to 100%?
https://docs.generateblocks.com/article/image-overview/#spacing
Hi Leo,
Thanks for the help - Apologies for the delay in getting back to you.
I tried adding:
.author-box_photo {
border-radius: 100%;
}
But still inherits the style here:
.blog-post-content-wrapper img {
border-radius: 1rem;
margin-top: 0.5em;
}
Thanks
Hi there,
if you select the GB Image Block - in its Spacing settings you can set the Border Radius there. Just make it 100% on all sides and remove any of the related CSS you added.
Hi David,
Hope things are going well!
if you select the GB Image Block – in its Spacing settings you can set the Border Radius there. Just make it 100% on all sides and remove any of the related CSS you added.
That's what I did originally (I still have 100% radius set on that image) but it's overidden by this:
.blog-post-content-wrapper img {
border-radius: 1rem;
margin-top: 0.5em;
}Which I'm using to style the images within a post.
Cheers
Aah ok - so in that case you could use this CSS for the author image:
.blog-post-content-wrapper .author-box_photo {
border-radius: 100%;
}Perfect thank you David!
You're welcome
