2
respostas

Layouts Responsivos trabalhando com layouts mobile

Oi, pessoal! O texto era pra ficar colado à imagem de cima, pq tem essa distância toda?

Obrigado.Insira aqui a descrição dessa imagem para ajudar na acessibilidade

.container { padding-right: 6%; padding-left: 6%; }

.destaques { background-color: var(--azul-claro); padding-top: 2.5rem; padding-bottom: 2rem; }

.destaques_titulo { color: var(--cinza-escuro); font-weight: 700; font-size: 1.5rem; font-family: var(--montserrat); text-transform: uppercase; text-align: center; margin-bottom: 2rem; }

.destaques_painel { display: flex; flex-direction: column; align-items: center; margin-bottom: 2rem; }

.destaques_painel-imagem { width: 100%vw; box-shadow: 0 2px 10px 5px #00000020; margin-bottom: 5rem; }

.destaques_painel-texto { font-weight: 700; font-size: 1.2rem; line-height: normal; }

.destaques_botao { color: var(--vermelho-forte); border-color: var(--vermelho-forte); margin: 0 auto; }

2 respostas

Oi, Flávio!

Ó, sem o código inteiro, incluindo o html, fica meio ruim de encontrar o erro. Se você puder compartilhar aqui pelo github ou pelo drive iria facilitar.

Mas acredito que seja alguma questão com margem ou padding que está passando batido. Tenta ir em "inspecionar" a página e em selecionar objeto, daí passa o mouse por cima desses elementos adjacentes pra ver como estão os espaçamentos.

Ainda não consegui ver, tô seguindo o módulo. Quando terminar, vou dar uma olhada.

Obrigado, Moana!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software