Display div according to screen resolution

Asked

Viewed 2,645 times

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>

The background-color works perfectly. But what I need is for the DIV COMP to be invisible when max-width is greater than 600px; and to be visible when max-width is less than 600px;

css html5

  • Friend, I recommend using the medias queries. Read the link to understand what they are and how they will help you. http://pt-br.learnlayout.com/media-queries.html

1 answer

1

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

What’s going on here is this::

  • 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;

The most advisable is that you start from the beginning of mobile-first and make changes only to larger screens.

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.