Hide div in the mobile version

Navigation
0

How do I hide a div in the mobile version? I have the following code: 

<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>

I would like that in the mobile version, id="texto-acessibilidade" would be hidden and  the id=texto-saudacao would appear and the desktop version would be the reverse.

CSS looks like this: 

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

The problem is that when I view the cell, id="texto-acessibilidade" continues to appear and id="texto-saudacao" remains hidden.

    
asked by anonymous 09.06.2018 / 14:12

1 answer

2

A style declaration with !important ignores any hierarchy and prevails over all others, it is the one with the highest priority.

Use 

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

Excessive use of this technique can cause a lot of headaches in the future. I'm not saying it's bad to use!! Important, in fact it can be useful in a lot of situations, the problem is that many developers lazily or simply unaware of precedence of selectors , they eventually choose this shortest path, but then make it very difficult to maintain the code.

Which css selector has priority? - stackoverflow

    
09.06.2018 / 15:13
Detect which submit button was sent how to get the opening and closing times and save in two variables with javascript?