как скрыть элемент тега div на мобильном телефоне

Question

См. Сайт http://www.localjobpool.com Я хотел был бы скрыть зеленый верхний бар в mobi le view. Вглядываясь код сНа тега:

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

    </div> 
</div> 

menuHolder и нав определены в моем пользовательском CSS. Я попробовал решение, как экран @media ......

как

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

Пожалуйста, скажите мне, как я могу скрыть эту панель в мобильном режиме. А где я должен вставить код, предложенный вами ...

Answer 1

Это должно работать ...

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

Answer 2

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

также информация является идентификатором, а не класс (#info .menuHolder)

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

Answer 3

Попробуйте этот медиа-запрос, он должен ориентироваться на все планшеты и смартфоны. Может быть, вы можете изменить его значение, чтобы приспособиться к потребностям:

@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; 
    } 

} 

Или же устройство, только на ландшафте:

@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; 
     } 

} 

работал отлично для меня.

Источник: https://gist.github.com/marcedwards/3446599