Assistindo as aulas do curso "HTML e CSS: Classes, posicionamento e flexbox" e seguindo os passos, consegui fazer o seguinte projeto: https://apresentacao-estudante-cc.vercel.app
Na tela do PC acredito que ficou legal, mas gostaria de deixar a imagem e o texto menores e mais espaçados. sem que os mesmos "bugassem". E, além disso, percebi que pelo celular o texto fica meio que entrando na imagem, aí como eu poderia corrigir isso? Agradeço a quem puder me ajudar.
Oi, tudo bem?
Sobre a questão da responsividade, uma técnica comum é usar media queries para ajustar o estilo com base no tamanho da tela. Por exemplo:
@media (max-width: 1200px) {
.cabecalho{
padding: 10%;
}
.cabecalho__menu{
justify-content: center;
}
.apresentacao{
flex-direction: column-reverse;
padding: 5%;
}
.apresentacao__conteudo{
width: auto;
}
}
Nesse exemplo a regra CSS se aplica apenas quando a largura da tela é no máximo 1200 pixels.
@media (max-width: 1200px): Este bloco de estilos CSS é aplicado apenas quando a largura da tela é igual ou inferior a 1200 pixels.
.cabecalho { padding: 10%; }: Define um preenchimento de 10% para o conteúdo dentro do elemento de cabeçalho quando a largura da tela é igual ou inferior a 1200 pixels.
.cabecalho__menu { justify-content: center; }: Centraliza o conteúdo dentro do elemento de menu do cabeçalho quando a largura da tela é igual ou inferior a 1200 pixels usando a propriedade justify-content.
.apresentacao { flex-direction: column-reverse; padding: 5%; }: Muda a direção do fluxo principal para "column-reverse" (coluna invertida) para o conteúdo dentro do elemento de apresentação quando a largura da tela é igual ou inferior a 1200 pixels. Além disso, define um preenchimento de 5% para esse elemento.
.apresentacao__conteudo { width: auto; }: Define a largura automática para o conteúdo dentro do elemento de apresentação quando a largura da tela é igual ou inferior a 1200 pixels.
Indico a leitura da documentação sobre media queries. E você também pode ver o código completo do GitHub para entender mais como foi feita essa responsividade.
Um abraço e bons estudos.