CODEWITHSUNDEEP
csswordpresstwitter-bootstrapstyling
user6449566
user6449566

Reputation: 13

In Wordpress CSS Styling @media screen and (max-width: 1024px) will not work

When I am using

@media only screen and (max-width: 1024px) {
  #imgWrapper {
    position: relative;
    width: 80%;
    Height: 80%;
  }
}

The code does not work and defaults to original styling however the code works for 

@media only screen and (max-width: 425px) {
  #imgWrapper {
    position: relative;
    width: 50%;
    Height: 50%;
  }
}

all the way up to 1024px and then breaks anyone have any idea why this is happening?

Upvotes: 0

Views: 1350

Answers (1)

Aziz
Aziz

Reputation: 7783

Your max-width: 1024px query must be placed before the max-width: 425px query in the code, otherwise, as an expected result of CSS specificity, overriding will occur.

Demo of wrong order:

#imgWrapper {
  border: 1px dashed red;
  padding: 10px;
  position: relative; }

#imgWrapper::after { content:"Default - Desktop/Large Screen"; }

@media only screen and (max-width: 425px) {
  #imgWrapper {
    position: relative;
    width: 50%;  }
  #imgWrapper::after { content:"Max-425"; }
}

@media only screen and (max-width: 1024px) {
  #imgWrapper {
    position: relative;
    width: 75%;  }
  #imgWrapper::after { content:"Max-1024"; }
}
<div id="imgWrapper">Media Query: </div>

Proper order:

#imgWrapper {
  border: 1px dashed red;
  padding: 10px;
  position: relative; }

#imgWrapper::after { content:"Default - Desktop/Large Screen"; }

@media only screen and (max-width: 1024px) {
  #imgWrapper {
    position: relative;
    width: 75%;  }
  #imgWrapper::after { content:"Max-1024"; }
}

@media only screen and (max-width: 425px) {
  #imgWrapper {
    position: relative;
    width: 50%;  }
  #imgWrapper::after { content:"Max-425"; }
}
<div id="imgWrapper">Media Query: </div>

jsFiddle: https://jsfiddle.net/azizn/d5bto8vL/

To conclude, media queries that are based on desktop-first model (max-width queries) should start with default styling for large screens then adding queries for lesser sizes, like so:

large/default > 1024 > 768 > 425 etc

Whereas in a mobile-first model, you use min-width queries and the default styling is smallest then add bigger screens:

small > 425 > 768 > 1024 etc

Upvotes: 1

Related Questions