Hide div for mobile version with css

Asked

Viewed 383 times

-1

I was researching here the solutions, but it did not work in my code, I leave here it:

CSS:

    @media screen and (max-width:768px)
{
   #img{ 
            display: none !important; 
        } 
}


    #img{
       background-color: none;
    }

HTML:

<div class="col-sm-6" id="img">
            <img src="img/book.png" width="650px" height="800px"  style="margin-top: -100px;margin-left: -50px">
        </div>

But it’s not working. What am I doing wrong? Tightening F12 to simulate a cell phone, but does not roll.

css

  • Just one question, which DIV you’re trying to hide?

  • The id you entered in the style, is not associated with any page element

  • Friend’s answer, it didn’t work

  • Guy puts his full CSS there! Edit the question and puts it whole! Your problem should be in another part of the code, because here it worked

  • edited the question

  • I’m wearing the bootstrap, I don’t know if it interferes...

Show 1 more comment

2 answers

1

@media only screen and (max-width: 480px) {
        #img{ 
            display: none !important; 
        } 
    }
    #img{
        background-color: blue;
        width: 150px;
        height: 150px;
    }

<div class="col-sm-6" id="img">
  <img src="img/book.png" width="600px" height="800px"  style="margin-top: -100px">
</div>

Your ID reference is not correct. Try this way, and remember to reference the ID’s correctly.

1


Dude! I saw that you are using Bootstrap, use a bootstrap 4 mass thing. vc do the following: 

<div class="col-sm-6 d-sm-none" id="img">

d-Sm-None means that when the screen size is considered Sm (small) this div n will be displayed, you don’t even need to "poke" in css lkkkkkkk

Browser other questions tagged css

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