CODEWITHSUNDEEP
htmlcss
Connor A
Connor A

Reputation: 39

@media queries for responsive design (mobile/tablet/desktop)

Above is my CSS for my question.
Is my CSS incorrect to display just one class per screen size?

I have been doing a million different variants of this (of course, this is an exaggeration) and I keep ending up with slightly different, but incorrect results.

This time I ended up with all 3 classes showing until the screen hit 480 pixels.
Then only my .desktop class showed.

    /*Desktop Query*/
    @media only screen and (min-width: 768px) {
        .desktop {
            display: none;
        }
        .mobile, .tablet {
            display: block;
        }
    }

    /*Mobile Query*/
    @media only screen and (max-width: 480px) {
        .mobile {
            display: none;
        }
        .desktop, .tablet {
            display: block;
        }
    }

    /*Tablet Query*/
    @media only screen and (min-width: 481px) and (max-width: 768px) {
        .tablet {
            display: none;
        }
        .mobile, .desktop {
            display: block;
        }
    }

Here is my HTML:

    <div class="mobile">
        <main>
            <h2> </h2>
            <p> </p>
        </main>
    </div>

Upvotes: 0

Views: 11306

Answers (2)

Obsidian Age
Obsidian Age

Reputation: 42304

The problem with your code not displaying correctly is that you've literally inverted the display 100% incorrectly from what it should be:

    /**Desktop Query*/
    @media only screen and (min-width: 768px) {
      .desktop {
        display: block;
      }
      .mobile, .tablet {
        display: none;
      }
    }

    /*Tablet Query*/
    @media only screen and (min-width: 481px) and (max-width: 768px) {
      .tablet {
        display: block;
      }
      .mobile, .desktop {
        display: none;
      }
    }
    
    /*Mobile Query*/
    @media only screen and (max-width: 480px) {
      .mobile {
        display: block;
      }
      .desktop, .tablet {
        display: none;
      }
    }

Note that I've also moved the tablet query to above the mobile query, as media queries will execute sequentially from top to bottom, which would explain why you were having strange results before.

Hope this helps! :)

Upvotes: 3

Ralph David Abernathy
Ralph David Abernathy

Reputation: 5508

I cleaned up your example so you can make more sense out of it. It works fine just by doing this:

/*Desktop Query*/
@media only screen and (min-width: 768px) {
  body {
    background: black;
  }
}

/*Mobile Query*/
@media only screen and (max-width: 480px) {
  body {
    background-color: tomato;
  }
}

/*Tablet Query*/
@media only screen and (min-width: 481px) and (max-width:768px) {
  body {
    background: pink;
  }
}

Upvotes: 1

Related Questions