Apply custom CSS class to images

Beaver Builder
1

Hello BeaverBuilder Team,

I would like to add a custom css class to some of my images on my homepage.
I created a custom class in my child theme:

.my-class img {
height: auto !important;
max-width: 100%;
width: auto !important;
border: solid 15px #336699;
background: #fff;
padding: 0px;
-moz-box-shadow: 0x 0 5px 1px rgba(0,0,0,0.3);
-webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.3);
box-shadow: 0 0 5px 1px rgba(0,0,0,0.3);
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Inside the page, under the advanced tab for this image -> custom CSS, I’ve added “my-class”.

But nothing happens…
Can you help where I’m wrong?

Thanks in advance
Bastian

2

Hey Bastian,

Where did you place “my-class” on the module? Under ID or Class? From your CSS, since you are using .my-class, you should place it under Class. If you place it under ID, then you should change your CSS to #my-class.

Hope this helps!

Ben

3

Hi Ben,

I’ve added the class “my-class” under Class.
Found under “Textbox-Settings” -> “Advanced” -> “CSS Selectors”.
But nothing happens…

Bastian

4

Hey Bastian,

I’m gonna need to have a look at the site you are working on for me to check thoroughly. Do you think you could send me the site URL? If you could grant temporary admin access as well that would be great.

Ben

5

[Content Hidden]

6

Hey Bastian,

I checked the page and the CSS seems to be applied to the image? Furthermore, your CSS is on top of the list so it should override any default CSS applied to the img element. Check screenshot.
http://imgur.com/phMpyKo

Ben

7

Hi Ben,

Jesus… I’ve cleaned the cache twice.
But you’re right! It’s working like it should…

Thanks for your help and your very fast responding time!!

Best regards
Bastian

8

Hey Bastian,

It could have been your browser. Try doing a Force Refresh next time.

No problem! Have fun with The Beaver! :slight_smile:

Ben