What's overriding my custom css?

MMRIZE

@greedyvegan
You can see how element’s css is composed in dev-console of client browser.(Ctrl+shift+i)

MMRIZE

@greedyvegan

The CSS window will show something like this;

This list is which CSS rules comprise your targetted element’s look. It is cascading, So the higher is prior to the lower rules. (overriding).
You can see what override your custom CSS rules.

greedyvegan

@MMRIZE

thank you.
So the order of the css makes or breaks the previous code?

sdetweil

@greedyvegan yes, custom.css order is top down. bottom could override top

but like @MMRIZE showed , the dev window right column will tell you where they come from and if they are overridden… (strike thru)

see
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1708472594922

greedyvegan

@sdetweil copy

thanks again

greedyvegan

I figured out how to fix my issue
I added :

.region.top.center{
top: -50px;
left: 560px;
}
.region.top.left{
  top: -50px;
  left: -50px;
}
.region.top.right {
top: -50px;
right: -50px;
width: 300px;
}

to the bottom of my custom css file.

thanks guys