How to work with CSS visibility?

Navigation
3

Greeting,

What I need to do is make an image invisible when the screen resolution reaches 576px, but I'm not succeeding, I'm doing this;

HTML 

<div class="col-sm-2 topo_branco animated  fadeInDown">
     <img src="assets/img/seta.JPG" height="250" >
</div>

CSS 

.topo_branco{
  visibility: visible;
  height: 200px;
  margin: 20px 0;
  padding: 10px;
}

@media(max-width: 576px){

      .topo_branco{
        visibility: hidden;
      }

}

What can be wrong?

    
asked by anonymous 08.06.2018 / 15:07

1 answer

2

You can use the Mobile First concept. 

.topo_branco{
   visibility: hidden;
   height: 200px;
   margin: 20px 0;
   padding: 10px;
}

@media screen and (min-width: 576px){
   .topo_branco{
      visibility: visible;
   }
}

This means that until you reach 575px the image is invisible. When you reach 576px the image will be visible.

    
08.06.2018 / 15:30
How to insert the loaded button into the database Strategy Pattern with Spring Boot