Make LI appear only on Mobile

Asked

Viewed 128 times

5

I have a LI and would like it to be shown only in mobile mode:

<ul style="display: block;">
 <li><a href="/">Início</a></li>
 <li class="list-cat"></li>
 <li><a href="teste">Preços</a></li>
 <li><a href="teste">Cases</a></li>
 <li><a href="teste">Sobre</a></li>
 <li><a href="teste">Contato</a></li>
 <li class="showMobile"><a href="teste">Mostrar apenas Mobile</a></li>
</ul>

Is there a possibility to do this with Jquery? I already have some screen sizes that mobiles use in my CSS file, in medias.

jquery css
  • 2

    Do you use Bootstrap? It has specific classes for this ...

  • I don’t use it. I made it myself.

  • You can’t use Medias queries, either jQuery even?

2 answers

4


You could create a css like this:

@media (min-width: 320px) {
  .showMobile{
    display:block;
  }
}
@media (min-width:480px)  {
  .showMobile{
    display:none;
  }
}

see working on Codepen

3

As you asked with Jquery and not Mediaquerie, I solved the problem by giving a get at the width of the screen and setting the display as a block if it is within the width you consider mobile. There are countless ways to do this with Jquery I believe this is the simplest !

$(".showMobile").css("display", "none"); //Desabilitando

var mobileWidth = 300; //Set no tamanho que você considerar mobile

//Habilitando se estiver dentro da largura que você deseja
if ($(window).width() < mobileWidth) {
        $(".showMobile").css("display", "block")
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul style="display: block;">
 <li><a href="/">Início</a></li>
 <li class="list-cat"></li>
 <li><a href="teste">Preços</a></li>
 <li><a href="teste">Cases</a></li>
 <li><a href="teste">Sobre</a></li>
 <li><a href="teste">Contato</a></li>
 <li class="showMobile"><a href="teste">Mostrar apenas Mobile</a></li>
</ul>

Browser other questions tagged jquery css

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