Para o hero ficar certo no mobile, defina a altura da seção primeiro, use uma imagem separada para mobile e verifique se uma cor de sobreposição está escondendo a imagem.
Quando acontece
A imagem de fundo do hero não aparece no celular, fica cortada, ou a seção quebra na versão mobile.
Causa
Causas comuns: uma cor (ex.: preta) na sobreposição de fundo do mobile cobrindo a imagem; a imagem não dimensionada para a seção; ou a mesma imagem do desktop usada no mobile.
Solução
-
Se a imagem do mobile aparece preta/escura, vá na configuração de sobreposição de fundo do mobile e torne a cor transparente.
-
Defina primeiro a altura/dimensão da seção no mobile e só depois ajuste a imagem dentro dela.
-
Use imagens separadas para desktop e mobile (largura padrão: 1920px no desktop, 1080px no mobile — veja Boas Práticas).
-
Se a seção quebra no mobile, ajuste a largura do conteúdo da seção para 'Largura total' / 100%.
-
Configure a imagem de fundo com Posição 'Topo Centro' e Tamanho 'Capa (Cover)'.
-
Se a imagem de fundo de um container simplesmente não aparecer, abra a Sobreposição de Fundo desse container e verifique se há uma imagem 'sem nada' (vazia) ocupando a sobreposição — é um 'bug do JSON' que ocorre em algumas importações. Exclua essa imagem vazia da sobreposição de fundo e a imagem de fundo volta a aparecer.
Para o hero ficar certo no mobile, defina a altura da seção primeiro, use uma imagem separada para mobile e verifique se uma cor de sobreposição está escondendo a imagem.
Quando acontece
A imagem de fundo do hero não aparece no celular, fica cortada, ou a seção quebra na versão mobile.
Causa
Causas comuns: uma cor (ex.: preta) na sobreposição de fundo do mobile cobrindo a imagem; a imagem não dimensionada para a seção; ou a mesma imagem do desktop usada no mobile.
Solução
Se a imagem do mobile aparece preta/escura, vá na configuração de sobreposição de fundo do mobile e torne a cor transparente.
Defina primeiro a altura/dimensão da seção no mobile e só depois ajuste a imagem dentro dela.
Use imagens separadas para desktop e mobile (largura padrão: 1920px no desktop, 1080px no mobile — veja Boas Práticas).
Se a seção quebra no mobile, ajuste a largura do conteúdo da seção para 'Largura total' / 100%.
Configure a imagem de fundo com Posição 'Topo Centro' e Tamanho 'Capa (Cover)'.
Se a imagem de fundo de um container simplesmente não aparecer, abra a Sobreposição de Fundo desse container e verifique se há uma imagem 'sem nada' (vazia) ocupando a sobreposição — é um 'bug do JSON' que ocorre em algumas importações. Exclua essa imagem vazia da sobreposição de fundo e a imagem de fundo volta a aparecer.