madu madu - 2 months ago 18
CSS Question

CSS media min-width not applying all styles

I have the following CSS styles:

@media (min-width: 1280px)
{
.window-padding {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 30px;
}
}

@media (min-width: 769px)

{
.window-padding {
padding-right: 20px;
padding-left: 20px;
padding-left: 10px;
padding-right: 10px;
}
}

.window-padding {
padding-right: 10px;
padding-left: 10px;
padding-left: 0px;
padding-right: 0px;
}


However, when I open in browser (width > 1280px), only padding-top and padding-bottom from min-width:1280px is applied. padding-left and padding-right is from style that doesn't have a @media condition.
Here is the what it applies:

enter image description here

EDIT:
I reordered CSS to have the lowest size first fixed the issue.
Also, I have duplicate padding styles by mistake.

Answer

First u go for default style ( after that increase the screen rez ) that means default > 768 > 1280 ( this apply for min-width ) if u choose to use max-width ( u go Default > 1280 > 768 )

for min width

.class {
  your style
}
@media screen (min-width: 768) {
  override default
}
@media screen (min-width: 1280) {
  override 768
} and so on

for max-width

.class {
  your style
}
@media screen (max-width: 1280) {
  override default
}
@media screen (min-width: 768) {
  override 1280
} and so on