Removing Image Border for a Single Image

[Ranjeeta]

Hi,
I have added the below CSS code to add a border to all images in the single article.

.single .inside-article img {
    border: 1px solid #002838;

Now, I want to exclude a particular image in the article.
How can I do that?
I’m using GP Premium and Block editor.
Image Ref: https://imgur.com/WgBCLb3

[David]

Hi there,

select the Image in the editor – In the Settings Sidebar > Advanced > Additional CSS field add: no-border

Then adjust your CSS to this:

.single .inside-article img:not(.no-border) {
    border: 1px solid #002838;
}

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

[Ranjeeta]

I have added “no-border” in the Sidebar > Advanced > Additional CSS.
I added the above CSS code snippet in the Additional CSS field of the website by using the customize option, but it didn’t work. I want to remove the border for this single image only.

[Leo]

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

David’s solution should work and we can’t tell why it’s not working without seeing the method applied live.

Let me know 🙂

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

[Ranjeeta]

Here is a link to the post: https://classicalpoems.com/guest-post-hindi-ka-bahishkar-kyon-rishika-ghai/

[Leo]

Try this as well as David’s code:

.single .inside-article .wp-block-image.no-border img {
    border: none !important;
}

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

[Ranjeeta]

Thanks

[Leo]

No problem 🙂

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

[Author]

Posts