Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Elementos desalinhados

Eu estava treinando o uso do CSS Grid com um site qualquer e os elementos não ficaram alinhados e não estou conseguindo encontrar os meus erros. Fiz uma página única mas meu cabeçalho ficou desalinhado com os elementos de grid que posicionei abaixo e também não ocupou 100% da largura que eu tinha estabelecido para o body, Os grids que eu criei também não ocuparam a largura completa, é como se na borda esquerda tenha ficado um dos grid-gaps. Esses desalinhamentos podem ser vistos nessa imagem.

1) Sobre o cabeçalho nessa outra imagem fica bem claro como ele ta desalinhado com a largura total do body

2) Já os grid dá para ver nessa imagem e nessa imagem que o gap do grid está desalinhando tudo

5 respostas

Fala ai Julia, tudo bem? Você está utilizando algum reset CSS? Eu recomendo o Normalize.css, ele vai ajustar alguns desses espaçamentos do body.

Espero ter ajudado.

Oi Matheus, coloquei o Normalize.css e não mudou nada :/

A boa notícia é que encontrei meu erro no cabeçalho mas a questão dos grids realmente não estou entendendo, acho que é aquela questão de utilizar o display:flex; com justify-content: space-between; mas não sei onde devo colocá-los. Se você puder dar uma olhada nos meus arquivos e indicar meu erro eu agradeceria muito. https://we.tl/t-TjKL7VVQmU

Fala Julia, dei uma olhada no site que você compartilhou para download, mas, não consegui achar o desalinhamento =//

Você atualizou algo? Pode me explicar certinho onde é o problema?

Fico no aguardo.

solução!

Oi Matheus, o desalinhamento que estou comentando é o desalinhamento entre a sessão que tem a imagem do taco e o escrito "Featured Taco" e as duas sessões acima dela. Essas três sessões ficam alinhadas à esquerda mas à direita não.

Mas eu encontrei um jeito de ajustar isso usando "1fr" ao invés de uma medida em "px", dessa maneira o CSS calcula automaticamente as dimensões das colunas e ficou certinho.

Fala Julia, fico feliz que tenha encontrado uma solução e resolvido seu problema, muito bom. Confesso que quando testei aqui não tinha visto desalinhamento nenhum kkkk

Sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.