Hello!
I have been working on a website, and I need two @media queries, but one of them won’t work, how do I do it?
My code:
@media screen and (max-width: 1100px) and (min-width: 801px) {
.arrow1 {
visibility: visible;
}
.arrow2 {
visibility: visible;
}
}
@media screen and (max-width: 800px) and (min-width: 200px) {
.arrow1 {
visibility: hidden;
}
.arrow2 {
visibility: hidden;
}
}
But it won’t work, it will only detect the @media query at the top, how can I fix it?
I’ve also already tried doing it like this:
@media screen and (max-width: 1100px) and (min-width: 801px) {
.arrow1 {
visibility: visible;
}
.arrow2 {
visibility: visible;
}
}
screen and (max-width: 800px) and (min-width: 200px) {
.arrow1 {
visibility: hidden;
}
.arrow2 {
visibility: hidden;
}
}
Any help would be appriciated!