0

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.

3
  • 1
    @media only screen and (max-width: 480px) { #texto-acessibilidade{ display: none !important; } }
    – user60252
    Commented 9/06/2018 às 12:40
  • Perfeito Léo. Funcionou! Muito obrigado!
    – user24136
    Commented 9/06/2018 às 12:43
  • Curiosidade, tudo bem, funcionou! Porém testei só com o que você colocou na pergunta e também funcionou aqui comigo, veja se pra você também funciona kithomepage.com/sos/texto-acessibilidade.htm
    – user60252
    Commented 9/06/2018 às 13:09

1 Resposta 1

2

Uma declaração de estilo com !important ignora qualquer hierarquia e prevalece sobre todas as demais, é a de mais alta prioridade.

Use

@media only screen and (max-width: 480px) {
  #texto-acessibilidade{ 
    display: none !important; 
  } 
}

o uso excessivo dessa técnica pode causar muita dor de cabeça no futuro. Não estou dizendo que é ruim utilizar o !important, na verdade pode ser útil em diversas situações, o problema é que muitos desenvolvedores de forma preguiçosa ou simplesmente desconhecendo a precedência dos seletores, acabam por escolher esse caminho mais curto, mas que depois dificultam e muito a manutenção do código.

Qual seletor css tem prioridade? - pt.stackoverflow

1
  • Olá Léo. Estranho. Porque aqui só funcionou com o que você passou. Mas levarei em consideração suas dicas. Obrigado.
    – user24136
    Commented 9/06/2018 às 17:56

Você deve fazer log-in para responder a esta pergunta.