Banner Responsivo (Full Banner)

Storefront (loja)
#1

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!

#2

@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
#3

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
#4

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

#5

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

#6

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

#7

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
#8

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.

#9

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
#10

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