Archived topic

Removing Image Border for a Single Image

7 replies · Started by Ranjeeta on November 22, 2019

Viewing posts 1–8 of 8

November 22, 2019 at 9:14 am #1072851

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

November 22, 2019 at 10:12 am #1072926

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

November 23, 2019 at 2:51 am #1073521

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.

November 23, 2019 at 8:22 am #1073947

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 :)

November 23, 2019 at 5:56 pm #1074307

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

November 23, 2019 at 6:06 pm #1074312

Try this as well as David's code:

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

November 24, 2019 at 12:09 am #1074430

Thanks

November 24, 2019 at 8:16 am #1074933

No problem :)

This archived topic is closed to new replies.

Start building better websites today.