When addressing the width of a specific class, I utilized CSS media queries as shown below:
@media (max-width:1920px) {
.slides {
width: 860px;
}
}
@media (max-width:1500px) {
.slides {
width: 852px;
}
}
@media (max-width:1280px) {
.slides {
width: 850px;
}
}
@media (max-width:1097px) {
.slides {
width: 680px;
}
}
@media (max-width:960px) {
.slides {
width: 540px;
}
}
@media (max-width:768px) {
.slides {
width: 410px;
}
}
Despite these media queries working fine from a browser zoom level of 500% to 100%, they stop being applied once the zoom level is set to 90%. Why is this happening and what mistake am I making?