[Resolved] Overriding .blog-post-content-wrapper img class

[Paul]

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

[Leo]

Hi there,

Can you try setting the border-radius on the image to 100%?
https://docs.generateblocks.com/article/image-overview/#spacing

[Paul]

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

[David]

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.

[Paul]

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

[David]

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%;
}

[Paul]

Perfect thank you David!

[David]

You’re welcome

[Author]

Posts