One issue I am encountering is that a particular element on the page triggers the same media query both when zoomed to 90% and 250%. This results in a problem where I cannot differentiate between the two states, causing the element to appear poorly.
@media (max-width:2133px) {
#slider button.right {
right: -80px;
/* right: -25px;*/
}
}
@media (max-width:768px) {
#slider button.right {
right: -25px;
}
}
<section id="slider">
<button class="right">
<span class="arrow right"></span>
</button>
<!-- more html -->
</section>
When zoomed to 250%, the appearance aligns with the 2133 width media query:
https://i.sstatic.net/r8VAX.png
Additionally, the arrow displays correctly but also falls under the same media query:
https://i.sstatic.net/LtGf3.png
The challenge now is how can I ensure right: -25px; applies only at 250% zoom?