Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Resolução de Tela | Responsividade | Código não reflete no Google Chrome

Referente ao curso HTML e CSS: ambiente, estrutura e estilo, no capítulo Estilizando e adaptando layouts com CSS e atividade Adaptando o layout para dispositivos móveis

por Lucas Silva Contieri
| 40.5k xp | 4 posts
Estagiário em Análise de Dados e Automação

Olá, preciso de suporte com a resolução da minha tela, até para conferir se era algum erro no código mais não, eu baixei o repositório da instrutora no link GitHub e percebi que no meu notebook não aplica a responsividade corretamente, já tentei de várias maneiras corrigir, mas sem sucesso.

Tentei as seguintes resolutivas:

  • Mudar para 100% o Zoom, no inspecionar ele altera o height, mas mantém o mesmo padrão da imagem que enviei abaixo, mesma coisa em relação a resolução da tela do notebook;
  • Resetei também as config do DevTools;
  • Desativei todas as extensões do navegador;

Segue as imagens de configuração da minha tela e etc:

Print tela resolução do notebook
Print do Google Chrome no modo Inspecionar
Print index.html
Na aula a index.html apararece por completo:

Print tela index.html Alura

1 resposta
solução!
por Eduardo Brito
| 38.7k xp | 44 posts

Olá, Lucas! Tudo bem?

Obrigado por compartilhar sua dúvida no fórum.

Analisando o projeto do curso, o comportamento que você descreveu é esperado. A responsividade foi aplicada corretamente, porém apenas nos breakpoints definidos nos @media, o que pode dar a impressão de que não está funcionando dependendo da largura do seu notebook.

No código da instrutora, os ajustes acontecem somente nestes pontos:

@media (max-width: 768px) {
  header img {
    margin: 65px 0 0 60px;
  }

  p {
    width: 648px;
  }
}

@media (max-width: 375px) {
  header img {
    margin: 32px 0 0 16px;
  }

  h1 {
    font-size: 40px;
  }

  p {
    font-size: 20px;
    width: 340px;
  }

  a {
    font-size: 20px;
    width: 251px;
  }

  section img {
    width: 340px;
    height: 230px;
  }
}

Isso significa que:

  • Se a largura da tela não for menor que 768px ou 375px, o layout continuará no estilo desktop
  • Alterar apenas o zoom não ativa o @media, pois ele depende exclusivamente da largura (width)
  • Em muitos notebooks, a resolução padrão não atinge esses valores automaticamente

Para testar corretamente, recomendo:

Abraços e bons estudos! ✨

Tópicos relacionados

Mostrar mais tópicos Mostrar menos tópicos

Conteúdos Alura com o tema

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Graduação | Pós-graduação | MBA