Button Class influenced by own Button Class

Ask the Community General Questions
1

The button css class is influenced by my own css (styles.css) class for buttons. Here it is the padding that makes the button in the AI ​​chat appear wider.
grafik

grafik
grafik640×353 12.8 KB

grafik

grafik
grafik

I fixed this with the following custom CSS code

[class*="icon-button__Container-sc"]{
  padding:0px;
}

But why is it so influenced?

2 Likes
3

Hi there, @Sina :wave:

I’ll consult with the devs and will get back to you once I have their response :slightly_smiling_face:

1 Like
4

Thank you for waiting, @Sina!

This happens because of a conflict between styles. In simple terms, CSS follows certain rules (like cascade, importance, and specificity) to decide which style will be applied to an element.

On your page, the browser calculates the styles, and the page’s styles end up overriding the widget’s styles. When you add a new style to the Custom CSS field, it’s applied “closer” to the widget (this is how our widget is designed), which makes it stronger than your website’s styles and allows it to override them.

1 Like
5

Hi @Max
OK, I understood. I should declare my button class more precisely, use the custom CSS function or exclude the icon-button__Container-sc in my class.

button:not(.icon-button__Container-sc)
1 Like