Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
galera perdi uma parte do site e tive que copiar e colar no vs mas nao esta funcionando normal como esta antes as imagens nao estao mais centralizadas
so que no meu inspecionar esta certo mas quando pego e entro pelo meu cll nao
alguem por favor poderia me ajudar o pq
a parte de celular que programei
Olá, Gustavo. Como vai?
Entendo perfeitamente a sua frustração. É muito comum que o comportamento no "Inspecionar" do navegador pareça correto, mas apresente problemas no dispositivo real devido a detalhes de renderização e box-model.
Analisando o seu código CSS e a imagem do seu celular, identifiquei os pontos que estão impedindo a centralização e causando o desalinhamento:
1. Problema de Overflow (Largura maior que a tela)
Na sua Media Query para 375px, você definiu para a section img uma largura de width: 380px. Como a tela do celular tem 375px (ou menos, dependendo do modelo), a imagem está "transbordando" para a direita. Isso impede que qualquer tentativa de centralização funcione, pois o elemento é maior que o próprio container.
2. Margens Fixas em vez de Automáticas
No header img, você usou margin: 32px 0 0 16px. Esse valor de 16px na esquerda empurra a imagem fixamente, impedindo que ela fique no centro.
Como ajustar para que funcione no celular:
Para centralizar elementos em telas pequenas, a melhor prática é usar display: block com margin: auto ou trabalhar com Flexbox no elemento pai. Tente realizar as seguintes alterações no seu bloco @media:
@media (max-width: 375px) {
/* Centralizando o Logo do Header */
header img {
display: block;
margin: 32px auto 0 auto; /* O 'auto' nas laterais centraliza o elemento */
}
/* Centralizando e ajustando o texto */
h1, p, a {
text-align: center; /* Garante que o texto interno esteja centralizado */
margin-left: auto;
margin-right: auto;
}
/* Ajustando as larguras para não estourarem a tela */
p {
font-size: 20px;
width: 90%; /* Use porcentagem para ser responsivo */
max-width: 341px;
}
/* Ajustando a Imagem Principal */
section img {
display: block;
margin: 0 auto;
width: 100%; /* Faz a imagem ocupar a largura da tela sem sobrar */
max-width: 350px; /* Garante que ela não fique gigante */
height: auto; /* Mantém a proporção da imagem sem achatar */
}
}
Dicas de Boas Práticas:
% ou vw (view width). Se você define algo com 380px em uma tela de 375px, o site ganhará uma barra de rolagem lateral horrível.<head>, existe esta linha:<meta name="viewport" content="width=device-width, initial-scale=1.0">. Sem ela, o celular tenta "simular" um desktop e ignora suas Media Queries.Tente substituir os valores fixos por margin: auto e larguras em porcentagem, e você verá que os elementos se encaixarão perfeitamente.
Espero que possa ter lhe ajudado!