I have created an HTML file that changes the background color based on the browser width. When the width is 769, the background color is set to white. At 768, it changes to green. However, when the width is 767, I expected it to become red but it still remains green until it reaches 766 where it does turn red. This has left me confused as to why the media query does not apply when the screen size is exactly 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>