I'm facing an issue with creating a responsive layout using CSS media queries to adapt to different screen resolutions. Even though I've set up Media Queries for specific resolutions like:
/*1280 x 1024*/
/*1280 x 960*/
/*1280 x 800*/
/*1280 x 768*/
/*1280 x 720*/
Despite having the same width, the browser only applies the CSS for "720px" resolution.
Take a look at my code below:
/*1280 x 1024*/
@media screen and (max-width: 1280px) and (max-height: 1024px) and (min-height: 961px) {
.resolution {
color:#0000ff;
}
}
/*1280 x 960*/
@media screen and (max-width: 1280px) and (max-height: 960px) and (min-height: 801px) {
.resolution {
color:#00ff72;
}
}
/*1280 x 800*/
@media screen and (max-width: 1280px) and (max-height: 800px) and (min-height: 769px) {
.resolution {
color:#1e00ff;
}
}
/*1280 x 768*/
@media screen and (max-width: 1280px) and (max-height: 768px) and (min-height: 721px) {
.resolution {
color:#ff00f0;
}
}
/*1280 x 720*/
@media screen and (max-width: 1280px) and (max-height: 720px) and (min-height:300px) {
.resolution {
color:#fffc00;
}
}
<div class="resolution">Lorem Ipsum</div>
Any ideas on what might be causing this behavior?