How to work with CSS visibility?

Asked

Viewed 93 times

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

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 could be wrong?

css
  • 2

    Nothing, your code works perfectly: http://output.jsbin.com/rimulayacu. Why not elaborate a [mcve] demonstrating the problem?

  • build a code so we can validate exactly. I created a fiddle and "hide" the div and the image, what exactly isn’t working? http://jsfiddle.net/rjq402vL/

  • When the resolution reaches 576px it was for the image to be invisible.

  • Which browser is using?

  • Your problem may be because you are using two classes of "visibility" one at hand in @media and the other with animeted.css fadeInDown, they must be conflicting and overwriting something like this... test remove the class fadeInDown to test that it must solve.

  • @wladyband And that’s exactly what your code does. See that I just copied and pasted your code into my example and it worked. Then do a [mcve] demonstrating the problem, because there are other factors in your application that are influencing and that have not been described in the question.

Show 1 more comment

1 answer

2


You can use the concept of Mobile First.

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

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

That means until you get in 575px the image is invisible. When it reaches 576px the image will be visible.

  • 1

    Only complementing: remove the visibility does not strip the screen field of view element. It hides with visibility, but the size of 200px will continue on your screen. It will be a 200x200 void. If you do disappear without leaving a visible trace, use the:None display. This yes hides the same way, but does not leave a 200px invisible box.

  • I know that, but that’s what he asked for. When he wants the element not to appear on the screen then I modify my answer.

Browser other questions tagged css

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