Full banner aparece pequeno no mobile!

Olá amigos! A loja integrada infelizmente culpa meu tema e meu tema culpa a loja integrada e meu problema não consigo solucionar. Se alguma alma caridosa puder me ajudar ficarei extremamente grata!
Preciso que meus full banner fiquem em tamanho grande no mobile, assim como ficam grandes no PC. Meu mobile para full banner não responde. Já incluí um código em JAVA que vi aqui no forum e não consegui resolver. Se alguém puder me ajudar serei muito grata!
Meu site: https://www.rsstoreoficial.com.br/

1 curtida

Oi @Rayanersstore tudo bem? tem uma solução para isso que é alterar a imagem quando o usuário do mobile acessar sua loja porém, alguns temas nativamente possibilita você criar duas imagens uma para Desktop e a outra para Mobile nesse caso é importante consultar documentação do seu tema, caso não tenha você precisa inserir por código manualmente.

Esse código abaixo altera a primeira imagem do banner observe o código, para selecionar um banner especifico você deve selecionar o ALT como fiz no exemplo na primeira imagem com alt=“Brindes” provavelmente esse nome foi preenchido por você através da plataforma

var img = document.querySelector('img[alt="Brindes"]');
img.setAttribute('src', 'https://i.imgur.com/qd4Lbj6.png');

Até então tudo bem mas, eu não tenho conhecimento aprofundado de javascript o código acima que eu fiz funcionou mas ele aplicou isso para todos os tamanho de tela. Faça o último teste com esse código abaixo:

if(window.outerWidth < 600) {
  var img = document.querySelector('img[alt="Brindes"]');
  img.setAttribute('src', 'https://i.imgur.com/qd4Lbj6.png');
}

Caso não funcione vamos esperar alguém da comunidade ajudar ou mostrar outras opções. Se acharmos uma solução faça isso:

  1. Criar 2 imagem para Desktop e Mobile.
  2. Subir a primeira imagem no banner do seu tema.
  3. Subir a segunda imagem no Gerenciador de arquivos e copiar o link gerado.
  4. Use o ALT para selecionar a imagem especifica.
  5. Substituir o link copiado do Gerenciador de Arquivos.

Obs: O tamanho que usei nesse exemplo foi 320x400. Você pode diminuir a altura de 400px, a largura de 320px é padrão.

Ficaria assim:

Enfim, fica em aberto até aparecer alguém e melhorar o código ou uma solução melhor que a minha :slight_smile: :+1:

3 curtidas

Nossa, já vou testar aqui. Muitoooooo obrigada!

1 curtida

De nada, se eu encontrar uma solução para mudar a imagem somente para celular irei postar aqui novamente… Até então se você aplicar o código que te passei ela aplica para todas as telas :frowning:

2 curtidas

Boa Noite! Desculpa te incomodar novamente mas talvez você possa me ajudar: o espaçamento das minhas categorias está bem grande e não consigo diminuir o conteiner o no meu mobile. Tem como me auxiliar?

Oi @Rayanersstore TUDO BEM?

Segue o código abaixo:

ul.nivel-um {
    margin: 0px 200px !important;
}

.full.menu .conteiner .nivel-um>li {
    width: 16% !important;
}

Ficará assim:

1 curtida

Boa Noite tiplace, tudo certo?
Poderia me auxuliar, eu segui o passo a passo mas mesmo assim não consegui, eu coloquei a segunda imagem no gerenciador de arquivos, coloquei o seu código no javascript, e coloquei o link da minha imagem, eu não tendi a parte de substituir o link copiado do gerenciador de arquivos, pois não tem como modificar o link que tem lá, agradeço se puder me auxiliar, um abraço!

Link da Minha Loja: https://all-hype.lojaintegrada.com.br/

o Full banner na versão mobile fica minusculo