Skip to content

Instantly share code, notes, and snippets.

@matheusgnreis
Last active August 30, 2021 15:22
Show Gist options
  • Save matheusgnreis/38c13b0f0cd22146d0f9efc103e54043 to your computer and use it in GitHub Desktop.
Save matheusgnreis/38c13b0f0cd22146d0f9efc103e54043 to your computer and use it in GitHub Desktop.
Elementos por tamanho de tela

Existem algumas lojas que gostam de colocar um botão Meus Pedidos apenas para desktop. Logo, lá em header__buttons você pode colocar uma tag "a", como <a style="font-size: 1rem" class="d-none d-md-inline btn btn-lg" href="/app/#/account/orders">Meus pedidos</a>, com as classes d-none d-md-inline, que irá forçar um display none, porém como terá um display inline block para tamanhos de tela md (medium|desktop), irá mostrar apenas no desktop, para mobile será escondido.

Caso queira que mostre apenas no mobile, você pode colocar uma tag html com a classe d-md-none, que irá mostrar para todos os tamanhos de tela, porém para o tamanho md(desktop), irá esconder.

Um exemplo aplicando ambas modalidades é:

<a id="user-button" class="btn btn-lg" role="button" href="/app/#/account/" style="font-size: 1rem" title="Minha conta">
  <span class="d-none d-md-inline">Minha conta</span> 
  <span class="d-md-none">
    <i class="fas fa-user"></i>
  </span> 
</a>

Veja que temos inserido d-none d-md-inline para a tag "span" com o escrito Minha Conta, ou seja, irá mostrar apenas para desktop. Já no mobile irá mostrar o ícone fas fa-user, porque ela está dentro de uma tag "span" que tem uma classe d-md-none, ou seja, mostrará para mobile e esconderá para desktop

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment