Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How to use multiple @media queries?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #285705
    Poxen
    Participant

    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!

    #285741
    Shikkediel
    Participant

    Code at the top works fine when I put it to the test…

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.