CODEWITHSUNDEEP
htmlcssmobileresponsive-designmedia-queries
Spencer Ryan
Spencer Ryan

Reputation: 23

Media query width 100% not working

Here is a link to the codepen for the code that I am working on. I am trying to get it so that if the device width is less than 540px, the width of the wrapper goes from 33.33% to 100%, however it doesn't seem to be doing so.

My media query is as follows:

@media only screen and (max-width: 540px) {
  #wrapper {
    width: 100%;
  }
}

My normal css for the wrapper is as follows:

#wrapper {
  width: 33.3%;
  margin: 0 auto;
  position: relative;
}

Upvotes: 2

Views: 2067

Answers (1)

Johannes
Johannes

Reputation: 67758

You have to put that media query BELOW the other rules in the stylesheet. The way you have it now (i.e. media query at the beginning of your stylesheet) it's overwritten by the general rule (containing width: 33.3%;) which follows below it.

https://codepen.io/anon/pen/GyPRVG

Upvotes: 1

Related Questions