Ajustar imagens da página do evento para visualização no celular

Quando uma imagem inserida no conteúdo da página ultrapassa a largura disponível no celular, você pode usar o campo CSS personalizado para limitar sua largura e preservar a proporção.

Abrindo o CSS personalizado

No menu lateral, clique em Página do Evento. Clique em Avançado.

Adicionando o ajuste para telas menores

No campo CSS personalizado, adicione o código abaixo. Se já houver outras regras, mantenha-as e acrescente este bloco ao final. Clique em Salvar dados para aplicar o ajuste.

@media (max-width: 767px) {
  .conteudo-pagina .area img {
    max-width: 100% !important;
    height: auto !important;
  }
}

Entendendo o que o código faz

• @media (max-width: 767px): aplica estas regras somente em telas com até 767 pixels de largura.
• .conteudo-pagina .area img: seleciona as imagens que estão nas áreas de conteúdo da página.
• max-width: 100%: impede que a imagem ultrapasse a largura do espaço que a contém.
• height: auto: mantém a proporção da imagem ao ajustar sua largura.
• !important: prioriza estas regras quando houver outras definições de largura máxima e altura.

Este ajuste depende da estrutura da página e das regras CSS já existentes no evento. Ele atua sobre as imagens das áreas de conteúdo; imagens de fundo e capas podem precisar de ajustes próprios.

E agora? Veja outras possibilidades na configuração avançada da página do evento.

Treinamento Gratuito Ao Vivo - Even3 Talks: Toda 3ª Quarta-Feira do mês no YouTube da Even3. Confira as edições anteriores clicando aqui.