2
respostas

[Dúvida] Espaçamento conteúdo filho não funciona

Olá,

O espaçamento entre o parágrafo, o conteúdo e os botões não estão funcionando, revisei meu código mas não sei o que está de errado.

Vou compartilhar, se alguém puder me ajudar, agradeço :)

O projeto está assim na web:

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

index.html

<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portifólio</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header></header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1>
            <p class="apresentacao__conteudo__texto">Olá! Sou Ana Moreira, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
            <div class="apresentacao__links">
                <a class="apresentacao__botoes" href="https://www.instragram.com/ana.curio">Instagram</a>
                <a class="apresentacao__botoes" href="https://www.github.com/anamoreiraa">GitHub</a>
            </div>
        </section>
        <img src="Imagem.png" alt="Foto da Ana programando">
    </main>
    <footer></footer>
</body>
</html>
  • CSS:
.titulo-destaque {
    color: #22D4FD;
}

.apresentacao{
    margin: 10% 15%;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.apresentacao__conteudo{
    width: 615px;

}

.apresentacao__conteudo__titulo {
    font-size: 36px;
    font-family: 'Krona One', sans-serif;
 
}

.apresentacao__conteudo__texto {
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;

}

.apresentacao__links {
    display: flex;
    justify-content: space-between;

}

.apresentacao__botoes {
    background-color: #22D4FD;
    width: 280px;
    text-align: center;
    border-radius: 16px;
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    padding: 21.5px 0px;
    color: #000000;
    text-decoration: none;
}
2 respostas

Olá, Ana!

Eu analisei todo o seu código e não encontrei nada que gerasse esse comportamento que você mencionou em seu post inicial. Mas isso claro porque eu não tenho o seu código completo e as imagens usadas por você claro.

Mas analisando o projeto em diferentes telas eu encontrei o "bug".

Na verdade, o que aconteceu no seu projeto foi o seguinte:

  • Na página "HOME" você provavelmente estava programando com um zoom diminuído da tela!

    Eu chuto que seja por volta de 80% ou 75% de zoom, quando deveria estar com 100%

  • Contudo, em algum momento você deve ter restaurado o zoom ao tamanho normal dado pelo navegador.

    Assim você estava como o zoom em 100% que era o normal e padrão do navegador.

Eu só gostaria de deixar uma observação para explicar que pode ser que os valores que eu comentei ou que eu mostrarei abaixo não sejam os mesmos que o seu, pois os tamanhos das nossas telas podem ser diferentes e os valores do zoom e as situações sejam diferentes, uma vez que o tamanho da tela define quase tudo relacionado ao design do site.

Mas a ideia de que o zoom é o agente causador dessa mudança é ideia principal desse post.

Eu vou deixar um GIF abaixo onde eu mostro essa mudança de zoom entre as telas:

Só um detalhe é que esse projeto é baseado no código que você me mandou, eu não sei se está igual ao seu, mas ele foi feito com o código que você de deixou em seu post.

gif mostrando uma mudança de zoom no projeto do aluno

Como você pode ver no GIF, eu aumentei e diminui o zoom várias vezes e alcancei o mesmo resultado que o seu. E ainda deu para mudar mais ainda o impacto visual de tudo com isso.

Mas para te ajudar e somente por curiosidade existe uma forma de controlar previamente o zoom do seu site, mas eu aviso desde já que ela nem sempre funciona, e dependendo da configuração do navegador do usuário ela pode nem funcionar.

Mas no caso eu faço dessa linha de configuração meta que fica dentro da tag <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Aqui que a escala inicial é de 1.0 (initial-scale=1.0) que corresponde a 100% da tela, mas para mudar isso é só mudar o valou disso, vou deixar uma mini tabelinha para te ajudar:

Numero na TagPorcentagem Correspondente
1.0100%
0.990%
0.880%
0.7575%

E assim por diante, dessa forma, você pode configurar a visualização/zoom que o usuário tem ao abrir o site inicialmente.

Em suma era isso, espero ter ajudado. E só lembrando que caso o problema não seja esse eu peço que você comunique, pois eu tentei encontrar algo no código, mas não encontrei nada que atrapalhasse.

Caso precise eu estarei aqui! E se não entender algo, ou se eu não fui claro o suficiente em algo peço que me comunique para que eu possa mudar a metodologia.

Abraços e bons estudos.

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓

Oi, Renan! Tudo bem?

Eu estava com os botões colados, e também estava com o zoom de página a 100% =P

A sua resposta para a colega me ajudou. Muito obrigado!

Abçs. Milena