Display div according to screen resolution

0

I have the following CSS script:

<style type="text/css">
  @media screen and (max-width: 600px) {
    .comp {
      background-color: #000000;
      display: block;
    }
  }
</style>

<div class="comp">

</div>

Perfectly works the background-color. But what I need is that the DIV COMP becomes invisible when max-width is greater than 600px; and is visible when max-width is less than 600px;

    
asked by anonymous 01.02.2016 / 17:49

1 answer

1
.comp {
    display: block;
}
@media screen and (min-width:600px){
    .comp {
        display:none;
    }
}

What is happening here is the following:

  • The div will have display: block until it reaches the minimum width of 600px;
  • When the width of the screen is 601 or more, it will have the display: none;

It is best to start from mobile-first / a> and make changes only to larger screens.

    
01.02.2016 / 17:54