Espaçamento diferente do protótipo do figma | HTML e CSS: responsividade com mobile-first

Solucionado (ver solução)

Solucionado
(ver solução)

1
resposta

Referente ao curso HTML e CSS: responsividade com mobile-first

por Rodrigo Colucci

| 76.3k xp | 65 posts

Fundador Escola de Celular

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

na primeira aula a moni dá um padding de 1em que equivale a 16px, no figma o padding top está 24px, porque essa diferença de valores?

1 resposta

solução!

por Renan Lima

| 2917.9k xp | 6070 posts

Instrutor Scuba Team

27/07/2022

Olá, Rodrigo.

Tudo bem?

O Figma é uma base para o projeto e de fato ficou uma diferença mesmo ali no <header> no cabeçalho.

Para deixar mais fiel ao Figma você pode colocar um padding no .cabeçalho de : padding: 0 1em;

e colocar o padding de : padding: 1em 16.65px; no .container__imagem, vai ficar assim:

.cabeçalho {
    background-color: var(--branco);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0 1em;     //AQUI
}

.container__imagem {
    padding: 1em 16.65px;     //AQUI
}

Testa ai e vê o que acha.

Espero ter ajudado.

Qualquer dúvida manda aqui. Valeu.