how to hide a div tag element on mobile view of site

Question

See the website http://www.localjobpool.com I would like to hide the green top bar in mobi le view. Staring code of div tag is:

<div id="info">
    <div class="menuHolder">

    </div>
</div>

menuHolder and nav are defined in my custom CSS. I tried the solution like @media screen......

like

@media screen and (max-width: 500px) {
    .info .menuHolder .nav {
        display: none
    }    
}

Please tell me how I can hide this bar in mobile view. And where should I insert the code suggested by you...

Try this link if it helps [Link](http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser) — Abhi, Mar 21 '15 at 12:12

score 0 · Answer 1 · edited Mar 21 '15 at 12:46

0

That should work...

@media screen and (max-width: 500px) {
.menuHolder{
display: none;}
}

edited Mar 21 '15 at 12:46

dippas

58,591
15
114
126

answered Mar 21 '15 at 12:15

Medda86

1,582
1
12
19

score 0 · Answer 2 · answered Mar 21 '15 at 12:15

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 .menuHolder {display:none;}
}

also info is id and not class ( #info .menuHolder )

@media screen and (max-width: 500px) {
#info .menuHolder{
display: none;}
}

chimos · Answer 3 · 2015-03-21T12:22:16.273

Try this media query, it should target all tablets and smartphones. Maybe you can modify its values to adjust to your needs:

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
  only screen and (-o-min-device-pixel-ratio: 13/10),
  only screen and (min-resolution: 120dpi) {

    .info .menuHolder .nav {
      display: none;
    }

}

Or the same devices, only on landscape:

 @media only screen and (-webkit-min-device-pixel-ratio: 1.3) and (orientation : landscape),
    only screen and (-o-min-device-pixel-ratio: 13/10) and (orientation : landscape),
    only screen and (min-resolution: 120dpi) and (orientation : landscape) {

      .info .menuHolder .nav {
        display: none;
      }

}

Worked perfectly for me.

Source: https://gist.github.com/marcedwards/3446599

how to hide a div tag element on mobile view of site

3 Answers3