Hello,
I'm trying to override (display: inline-block; ) in Basic.css file by creating a class in my own css file:
.testdisplayblock { display: block; }
I've added this to the style class of my element.
I've tested this via inspect element first in the browser and it works.
Picture below is how it's not supposed to be and display: inline-block; is still on. but has a line through it.
Picture below is how it is supposed to be -> display: inline-block; has a line through it so that should mean it's disabled.
So my problem is even though it has a line through it it is still active i don't know i can fix this. If anyone has any advice, thanks!
Hi Daan v,
In your example the Theme style is overriding.
You can check the orders in this link.
Basically, the theme has precedence has you can see below (screenshot from the link shared above).
Hope it helps,
João
Hello Daan,Where did you put the style definition for the class here?
Just want to figure out where the Basic.css comes from. (Edit: reason I'm asking is because I suspect the same that João Marques said above)You can try to change the selector to something like:
.main-content.testdisplayblock { display: block; }
to see if the specificity helps to solve your problem.
i fixed it by replacing
with
.OSInline { display: block; }
I still have a weird gap betweer these containers
Any idea's?
Hi again Daan v,
You're overriding by changing the class OSInline which is used in many places.
You should be more detailed on your CSS to avoid collateral effects.
In your case, like .testDisplayBlock.OSInline {display: block;}.
In this way the CSS would only apply to an element which has both classes and since it is more specific it should have priority over the others.
Cheers,
João Marques wrote:
I didn't realize, thanks !
I'm glad I could help!
If you were able to obtain your answer please mark the answer as a solution, so that in the future others can look into this thread and understand if it's closed or not.
Thanks in advance.