Banner com scroll horizontal no celular/mobile

Olá lojista, tudo bem?
Em alguns ramos, está ocorrendo a tendência de mostrar meio banner para gerar uma curiosidade de realizar o scroll e ver demais opções, ao invés de simplesmente mostrar todos os banners em tela, isso é feito com um pouco de CSS apenas, conforme você pode ver pelo código abaixo:

@media(max-width: 578.59px) {
  .banners-grid .row {
    display: flex;
    overflow-x: scroll;
    flex-wrap: nowrap
  }
  .banners-grid .col-12.col-lg-4.mb-3.mb-lg-0 {
    max-width: 66.6% !important;
    flex: 0 0 66.66% !important;
  }
}

No caso, a forma tradicional fica da seguinte forma:

E a alterada com o código:

Se quiser que todos os banners grid do seu site sigam a mesma tendência, basta modificar o código acima para:

@media(max-width: 578.59px) {
  .banners-grid .row {
    display: flex;
    overflow-x: scroll;
    flex-wrap: nowrap
  }
  .banners-grid .col-12 {
    max-width: 66.6% !important;
    flex: 0 0 66.66% !important;
  }
}

Basta aplicar em sua loja e ver como fica! :grinning:

1 curtida