Log in to AnswerLog in to Follow
UserImage.jpg
Daan v
150Views
7Comments
Solved
Css override not working
Question
CSS

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!


0
0
17 Sep 2020
2018-10-29 08-31-03
João Marques
mvp_badge
MVP
Solution

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

1
0
17 Sep 2020

Hello Daan,

Where did you put the style definition for the class here?

.testdisplayblock {
    display: block;
}

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.

0
0
17 Sep 2020

i fixed it by replacing

.testdisplayblock {
    display: block;
}

with

.OSInline {
    display: block;
}


0
0
17 Sep 2020

I still have a weird gap betweer these containers

Any idea's?

0
0
17 Sep 2020
2018-10-29 08-31-03
João Marques
mvp_badge
MVP

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


1
0
17 Sep 2020

João Marques wrote:

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


 

 I didn't realize, thanks !

0
0
17 Sep 2020
2018-10-29 08-31-03
João Marques
mvp_badge
MVP

Hi Daan v,


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.


Cheers,

João

0
0
17 Sep 2020
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.