Como faço para esconder uma div na versão mobile? Tenho o seguinte código:
<div id="wrapper" class="home-page">
<div class="topbar">
<div class="container">
<div class="row">
<div class="col-md-12">
<p class="pull-left hidden-xs" style="font-weight: bold"><i class="fas fa-phone fa-lg"></i> Central de Vendas: (99) 9999-9999 | <i class="fas fa-envelope fa-lg"></i> <a href="mailto:[email protected]" style="color: #FFF">[email protected]</a></p>
<p class="pull-right" id="texto-saudacao"><script src="js/saudacao.js"></script> Seja bem-vindo(a) ao nosso site!</p>
<p class="pull-right" id="texto-acessibilidade">
<a href="#conteudo" style="font-weight: bold;" accesskey="i" data-toggle="tooltip" data-placement="bottom" title="ir para o conteúdo ALT + i">Ir para o Conteúdo (i)</a> |
<a href="#" class="fonte" style="font-weight: bold;" accesskey="a" data-toggle="tooltip" data-placement="bottom" title="Aumentar a fonte ALT + a" id="maior">Aumentar Fonte (a)</a> |
<a href="#" class="fonte" style="font-weight: bold;" accesskey="m" data-toggle="tooltip" data-placement="bottom" title="Diminuir a fonte ALT + m" id="menor">Diminuir Fonte (m)</a> |
<a href="#" id="click" class="ativar" style="font-weight: bold;" accesskey="c" data-toggle="tooltip" data-placement="bottom" title="Contraste ALT + c">Contraste (c)</a>
</p>
</div>
</div>
</div>
</div>
</div>
Gostaria que na versão mobile, o id="texto-acessibilidade"
ficasse oculto e
o id=texto-saudacao
aparecesse e na versão desktop fosse o inverso.
O CSS está dessa forma:
body {
font-family:'Open Sans', Arial, sans-serif;
font-weight:300;
line-height:1.6em;
color:#656565;
font-size: 1.4em;
}
#texto-acessibilidade{
display: block;
}
#texto-saudacao{
display: none;
}
.....
@media (min-width: 768px) and (max-width: 979px) {
#texto-acessibilidade{
display: none;
}
#texto-saudacao{
display: block;
font-weight: bold;
}
}
@media (max-width: 767px) {
#texto-acessibilidade{
display: none;
}
#texto-saudacao{
display: block;
font-weight: bold;
}
}
@media (max-width: 480px) {
#texto-acessibilidade{
display: none;
}
#texto-saudacao{
display: block;
font-weight: bold;
}
}
O problema é que quando visualizo pelo celular, o id="texto-acessibilidade"
continua aparecendo e o id="texto-saudacao"
continua oculto.