Search code examples
htmlcssmedia-queries

Display two divs on mobile devices, but hide one on desktop, using media query

In my project I have two divs (i.e #div1, #div2). I want to show both divs on mobile devices and only #div1 on desktop devices.

@media screen and (max-width: 600px) {
        #div1 {
            display: none;
        }
}

In this case, work as desktop show- #div1,#div2 and mobile showing #div2.

But I want desktop to show #div1, and mobile to show #div1,#div2

How can write a @media-query for this. I can't understand.

Solution 

  • /* mobile first */

.div1, .div2 {
  padding: 20px;
  margin-bottom: 10px;
}

.div1 {
  background-color: pink;
}

.div2 {
  background-color: tan;
}


@media screen and (min-width: 600px) {
  .div1{
    display: none;
  }
}
    <div class="div1">DIV 1</div>
<div class="div2">DIV 2</div>

    You have it just swap out min for max in the media query.