CODEWITHSUNDEEP
htmlcssmedia-queries
Ozymas
Ozymas

Reputation: 457

Media query max-width not working inclusively

I'm setting up the stylesheets for a responsive website, and want to provide different layouts for screens with width >= 768px and screens with width < 768px. However, when i use @media (max-width: 767px), both the 767px and 768px are affected with the media query contents.

I've tried using @media (max-width: 768px) instead, but it (as expected) applied the media query contents to 768px, which is not the outcome i need.

You can try this code in any page (I tried it on Firefox and Chrome, with the same results):

body {
  background: red;
}

@media (max-width: 767px) {
  body {
    background: green;
  }
}

I created a fiddle where you can see the problem: https://jsfiddle.net/e0hdyqc9/

When you add these rules to a page, both 767px and 768px are red. However, if you try replacing 767px by 768px, you'll find that now both 767px and 768px are green! How is that possible?

Upvotes: 4

Views: 3877

Answers (1)

Daliah Aljutayli
Daliah Aljutayli

Reputation: 34

Put this in the page header: 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Add this CSS: 

@media only screen and (max-width: 767px) {
    body { background-color: green;  }}

@media only screen and (min-width:768px) {
  body { background-color: yellow;}}

The red background will not show because of the min & max values!

When the width=767px is green & the width=768px is yellow, there won't be space for red.

enter image description here

enter image description here

Upvotes: 1

Related Questions