I have an 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 it possible to do this with JQuery? I already have some screen sizes that mobiles use in my CSS file, in means .
You could create a css like this:
@media (min-width: 320px) {
.showMobile{
display:block;
}
}
@media (min-width:480px) {
.showMobile{
display:none;
}
}
As you requested with JQuery and not MediaQuery, I solved the problem by giving a get in the width of the screen and setting the display as block if it is within the width that you consider mobile. There are many 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><ulstyle="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>