Banner Responsivo (Full Banner)

Boa tarde! Gostaria de colocar o Banner Responsivo em tela inteira. Há algum código para implementar e aproveitando qual seria as medidas das imagens indicadas tanto para desktop como para mobile?

Desde já obrigado.

Abraços!

@roque acho que nessa posso te ajudar…kkkk
Quanto as medidas dos bannes eu uso 1920x500px para o desktop e 1080x1080px para o mobile.
Você coloca as 2 imagens pelo CMS. Por exemplo, para a página principal da sua loja. Vá em Páginas, Página Inicial, em seções clique em Add seções item e selecione Slider de banners. Escolha a posição dele na sua página e inclua os banners. Espero ter ajudado!

4 curtidas

Obrigado @Carlos Vou testar essas medidas. A questão da colocação dos banners eu compreendi. Apenas gostaria de manter o Banner Responsivo em tela inteira. Coloquei uma imagem de 1200 x 300 e acho que ela diminui. A seção acredito que esteja configurada para ter um limite, por isso acredito que um código resolva, não sei. De qualquer forma testarei o que passou e verificarei.

Mais uma vez obrigado.

Abraço!

1 curtida

@Carlos obrigado mas ficou na mesma. @Matheus ou alguém do front, poderiam verificar e dar uma ajuda, por favor? Obrigado.

@roque qual tamanho de tela você está testando ai?

@Matheus Resolução da tela: 1366 x 768

Você tava usando o banner responsivo, porém ele não é full. Full seria o banner slider, que também é responsivo. Modifiquei e na sua loja deve estar funcionando já

2 curtidas

Valeu @Matheus ! Achei que também poderia utilizar o banner responsivo. Já visualizei e deu certo. Há alguma medida padrão para as imagens no slider? Obrigado.

No mobile sugiro que seja com largura de no máximo 720 que um celular pode chegar, assim deixa ele mais leve. No desktop, uma imagem com tamanho máximo de 1400px

@media  screen and (min-width: 992px) and (max-width: 1367px) {
  .banner-slider {
    max-width: 100% !important;
  }
}
// apenas tablet
@media screen and (min-width: 481px) and (max-width: 991px) {
  .banner-slider {
    max-width: 100% !important;
  }
}
2 curtidas

Agora ficou mais fácil habilitar o Full Banner na sua loja, não é necessário inserir códigos!

Veja esse tutorial

OBS.: Caso tenha sido inserido algum código na sua loja para realizar essa configuração, o ideal é que seja retirado pra evitar duplicidade e evitar gerar algum erro :slight_smile:

2 curtidas