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

[Bug] Conteúdo vazando pelo padding do elemento pai em uma página, e nãoo vazando em outra página

Estou na formação HTML e CSS começando do zero e estava finalizando meu projeto do portfólio, mas vi que ao abrir o site no celular, a página "home" está com as bordas cortadas mas a página "about" está certa. Abrindo o inspecionar vi que na primeira página o conteudo está vazando pelo padding da classe apresentacao, coisa que não acontece na segunda página. Estou mandando print do inspecionar de ambas as páginas e do meu repositório

Inspecionar da pagina home com foco na class="apresentacao" Inspecionar da pagina about com foco na class="apresentacao"Repositório: https://github.com/arthurmarson/portfolio-html-css.git

2 respostas
solução!

Olá, Arthur. Tudo bem?

O que está acontecendo é que a palavra Desenvolvimento é grande demais para caber no espaço que ela tem em tela, então ela força a tag a se esticar fazendo com que ela vaze do container. Você pode ajustar o tamanho da fonte até a palavra caber no elemento, ou usar a regra word-break para fazer a palavra quebrar, assim:

.apresentacao__conteudo__titulo {
    font-size: 2.125rem;
    font-family: var(--fonte-primaria);
    word-break: break-word;
}

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Obrigado pela ajuda!!!