Скрыть содержимое только на мобильном телефоне

Question

Я хочу, чтобы меню моего веб-сайта (мобильного или настольного) выглядело таким же, как этот: http://www.panic.lv/en/ (кроме HOME, когда мобильный) Рабочий стол - Показать ссылки "HOME", "WORKS", "О КОМПАНИИ »и« КОНТАКТЫ » Мобильный - нет ссылок, только логотип

Я следовал this instructions, но они, похоже, не работают полностью.

HTML

<div id="wrapper"> 
    <ul class="menu"> 
     <div id="home"><a href="index.html">HOME</a></div> 
     <div id="works"><a href="workshome.html">WORKS</a></div> 
     <div id="logo"></div>  
     <div id="about"><a href="about.html">ABOUT</a></div> 
     <div id="contacts"><a href="contacts.html">CONTACTS</a></div> 
    </ul> 
</div> 

CSS

#wrapper { 
    margin-left: 30px; 
    margin-right: 30px; 
    background-color: none; 
    margin-top: 30px; 
    display: flex; 
    -webkit-display: flex; 
    -moz-display: flex; 
} 

.menu { 
    width: 100%; 
    height: 100%; 
    background-color: none; 
    display: flex; 
    -webkit-display: flex; 
    -moz-display: flex; 
    align-items: center; 
    -webkit-align-items: center; 
    -moz-align-items: center; 
    padding: 0px; 
} 

@media screen and (min-width: 991px) { 
#home { 
    margin-left: 0px; 
    height: 30px; 
    width: 20%; 
    font-family: 'Ropa Sans', sans-serif; 
    color: ghostwhite; 
    font-size: 15px; 
    font-weight: normal; 
    background-color: none; 
    box-sizing: border-box; 
    text-align: right; 
} 

#works { 
    height: 30px; 
    width: 20%; 
    font-family: 'Ropa Sans', sans-serif; 
    color: ghostwhite; 
    font-size: 15px; 
    background-color: none; 
    box-sizing: border-box; 
    text-align: center; 
} 


#about { 
    height: 30px; 
    width: 20%; 
    font-family: 'Ropa Sans', sans-serif; 
    color: ghostwhite; 
    font-size: 15px; 
    background-color: none; 
    box-sizing: border-box; 
    text-align: center;  
} 


#contacts { 
    height: 30px; 
    width: 20%; 
    font-family: 'Ropa Sans', sans-serif; 
    color: ghostwhite; 
    font-size: 15px; 
    background-color: none; 
    box-sizing: border-box; 
    text-align: left; 
    } } 

Answer 1

Изменить display: flex для display: none; к существующим .menu правил, чтобы скрыть меню.

Затем добавьте в файл CSS, чтобы включить его выше определенного размера экрана:

@media (min-width: 1000px) { 
    .menu { 
     display: flex; 
    } 
} 

(размер, 1000px, является наполнитель в зависимости от того, что вы говорите только телефон, или. также таблеток, или что, вам нужно будет это изменить)

EDIT - Ответ выше подходит для скрытия всего меню, я оставляю его для тех, кто исследует этот простой вариант. Ниже приведены более конкретные параметры, которые я упускал из виду из этого вопроса.

Пренебрежение изменениями из приведенного выше ответа.

Если вы хотите сделать это с минимумом изменений кода/дополнительного HTML, вы можете просто добавить это к вашему CSS:

.menu div { 
    display: none; 
} 
.menu div#logo { 
    display: block; !important 
} 
@media (min-width: 991px) { 
    .menu div { 
     display: block; 
    } 
} 

Однако я настоятельно рекомендую более стабильной (и проще отредактировать позже) решение было бы добавить class="links" друг div, кроме логотипа, а затем использовать следующий CSS:

.menu div.links { 
    display: none; 
} 
@media (min-width: 991px) { 
    .menu div.links { 
     display: block; 
    } 
}  

Answer 2

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