[Resolved] Custom class to image

[Henk]

Hi,

I want to add the following custom class to one of my images:

img {
   padding: 10px;
   border: 4px solid #ffffff;
   background-color:#F0F5F9;
}

The problem is, this is only working when I use IMG. But when I add a custom class (because I want it to be applied on one image only) it’s not working. Under advanced –> Additional CSS class(es) I have added my custom class. But then the custom class is applied to the container, and not to the image.

What am I doing wrong?

[David]

Hi there,

img is the elements tag – so it will apply to all images.
Instead you would create your own custom class eg.

.img-has-border {
   padding: 10px;
   border: 4px solid #ffffff;
   background-color:#F0F5F9;
}

Then add the Additional CSS Class to your block of: img-has-border

[Henk]

Hi David,

That is the problem, that does not work. When I do that, I get a border around my div instead of around my image.

I now have: is-style-rounded img-has-border
– is-style-rounded for the round image
– img-has-border for the border

See my website adress in the private information field.

[David]

Update your CSS to this:

.img-has-border img {
   padding: 10px;
   border: 4px solid #ffffff;
   background-color:#F0F5F9;
}

This will target the img that is inside the <div class="img-has-border">

[Henk]

Thanks David!

[David]

You’re welcome

[Author]

Posts