Media Queries breakpoints clarification - html

Question

I've setup these breakpoints
X-Small devices (portrait phones, less than 576px)
#media (max-width: 576px) {
body {
background-color: red;
}
}
Small devices (landscape phones, less than 768px)
#media (max-width: 768px) {
body {
background-color: blue;
}
}
Medium devices (tablets, less than 992px)
#media (max-width: 992px) {
body {
background-color: green;
}
}
Large devices (desktops, less than 1200px)
#media (max-width: 1200px) {
body {
background-color: purple;
}
}
X-Large devices (large desktops, less than 1400px)
#media (max-width: 1400px) {
body {
background-color: yellow;
}
}
Why if I try to resize the screen the colour is always yellow and doesn't change according with the breakpoints?

Answer 1

Because max-width: 1400px is also true for smaller screens. Either place the larger screens at top so that the queires for smaller screens overwrite the value or use #media (min-width: value) and (max-width: value) { ... }
Starting with the largest to the smallest screen:
#media (max-width: 1400px) {
body {
background-color: yellow;
}
}
#media (max-width: 1200px) {
body {
background-color: purple;
}
}
#media (max-width: 992px) {
body {
background-color: green;
}
}
#media (max-width: 768px) {
body {
background-color: blue;
}
}
#media (max-width: 576px) {
body {
background-color: red;
}
}
Using the and-keyword:
#media (max-width: 576px) {
body {
background-color: red;
}
}
#media (min-width: 577px)
and (max-width: 768px) {
body {
background-color: blue;
}
}
#media (min-width: 769px)
and (max-width: 992px) {
body {
background-color: green;
}
}
#media (min-width: 993px)
and (max-width: 1200px) {
body {
background-color: purple;
}
}
#media (min-width: 1201px)
and (max-width: 1400px) {
body {
background-color: yellow;
}
}