Hide div in mobile version

Asked

Viewed 2,584 times

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 in the mobile version, the id="texto-acessibilidade" remain hidden and the id=texto-saudacao appeared and the desktop version was the other way around.

CSS is that way:

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 visualize by cell phone, the id="texto-acessibilidade" continues to appear and the id="texto-saudacao" remains hidden.

css
  • 1

    @media only screen and (max-width: 480px) { #text-accessibility{ display: None ! Important; } }

  • Perfect Leo. It worked! Thank you very much!

  • Curiosity, all right, it worked! But I tested only with what you put in the question and also worked here with me, see if for you it also works http://kithomepage.com/sos/texto-accessibilityhtm

1 answer

2


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

Use

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

the excessive use of this technique can cause a lot of headache in the future. I am not saying that it is bad to use ! Mportant, actually can be useful in several situations, the problem is that many developers lazily or simply unaware of the precedence of selectors, end up choosing this shorter path, but then make it very difficult to maintain the code.

Which css selector has priority? - en.stackoverflow

  • Hello Leo. Strange. Because here only worked with what you went through. But I will take your tips into consideration. Thank you.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.