Boa Tarde! Estou acompanhando e fazendo a criação do site, mas no meu notebook as configurações não estão batendo. Quando eu antero o zoom da tela, as configurações se alteram ta,bém de acordo com o zoom e acaba ficando incompativel com os componentes adicionado no front.
Olá, Barbara, como vai?
Essa diferença no layout pode estar acontecendo devido à resolução do seu notebook em comparação com a tela utilizada pela instrutora. Uma boa prática é utilizar o DevTools do navegador para simular diferentes resoluções. No Google Chrome, por exemplo, você pode abrir o DevTools com F12, clicar no ícone de dispositivos (Ctrl + Shift + M) e ajustar a largura da tela para valores maiores, como 1920px.
Se ainda precisar de ajuda com qualquer coisa, não hesite em me chamar.
Espero ter ajudado!
Siga firme nos seus estudos e conte com o fórum sempre que precisar!
Abraços :)
Bom dia! Sim, eu fiz a alteração e deixei na resolução que eu normalmente uso, mas caso outra pessoa acesse, o site e todos os componentes que formam ele, vão ficar desproporcionais. Não vou ter aquela responsividade, entende? Tem algum jeito de mudar isso? Se eu coloco 100% os componentes ficam gigantes e tudo junto, mas se eu vou diminuindo a resolução, eles vão diminuindo também.
Oi, Barbara.
Para aplicar a responsividade em dispositivos de tela maior é mais simples, por exemplo, no arquivo Container.module.css eu fiz a seguinte alteração:
.container section {
margin: 2em auto;
text-align: center;
}
Aqui eu removi a margem fixa de 20em e a deixei automática, dando um respiro maior para os elementos quando a tela diminuir de tamanho.
No arquivo Inicio.module.css, eu fiz o seguinte:
.container {
display: flex;
justify-content: space-around;
max-width: 80vw; /* Limita o tamanho do container a 80% da largura da tela do dispositivo */
gap: 1em; /* Põe um espaçamento de 1em entre os cards */
flex-wrap: wrap;
/* Essa regra faz com que caso algum card não caiba na linha,
ele seja jogado imediatamente para a linha de baixo, deixando o
fluxo de elementos mais flexível*/
}
Confere o resultado no gif abaixo:
Como eu disse, essa alteração funciona bem para dispositivos de telas maiores, como desktops ou notebooks. Mas para aplicar a responsividade para dispositivos menores como tablets e celulares, pode ser necessário o uso de media queries para rearranjar os elementos.