CSS Media Query does not apply on exact 767

user_395206 0
Viewed 389

This is my html file. on browser width 769 background color of the body is White. on 768 it changes to Green. on 767 I am expecting it to become Red but it still remains green. on 766 It becomes red. So my confusion is why does media query does not apply when screen size is exact 767.

Fiddle: https://jsfiddle.net/asifsomy/wtvknrja/3/show

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

@media only screen and (max-width: 767px) {
  body {
    background: red;
  }
}
<html lang="en">
<body>
</body>
</html>

enter image description here

media-queries css
1 Answers

By default background color is white. You use max-width that's why background-color show green only for 768px. When your screen size greater then that it's got white default color. If you want green color when screen size greater then 768px just use min-width

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

Screen size 767px body color https://prnt.sc/10hrmna

user_39802250
Related