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

[Dúvida] Tamanho da imagem não é alterada

Olá! Desde o primeiro curso da formação estou com um problema na imagem. Esperei pelas aulas de responsividade, mas ainda assim não consegui resolver. Independente do que eu faça, a imagem continua fixa e não muda de tamanho (nem pelo zoom do computador, nem pelo celular). Quando abro em outras telas, ela até muda, mas não fica no lugar que deveria. Se alguém puder me ajudar, agradeço!

Meu código: https://github.com/RyanMateus7/portifolio-html-css

2 respostas
solução!

Olá, Ryan! Tudo bem?

Baixei seu projeto e a imagem está se movimentando sim:

Gif da página do portffólio do Ryan exibindo a movimenttação da imagem quando a aba inspecionar é aberta

No entanto, se você quer que no responsivo ela fique abaixo da sua apresentação, você pode mudar o estilo da classe apresentação para:

.apresentacao {
  padding: 5% 15%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.875rem;
}

O que adicionei:

1. justify-content: center;

  • O que faz: Controla o alinhamento dos itens ao longo do eixo principal (que, por padrão, é o eixo horizontal).
  • Efeito: Com center, os itens dentro do container são centralizados horizontalmente. Se houver espaço extra no container, ele será distribuído igualmente à esquerda e à direita dos itens.
  • Exemplo prático: A imagem e a seção de apresentação dentro do .apresentacao ficarão agrupados e centralizados no meio do container, em vez de alinhados à esquerda ou à direita.

2. flex-wrap: wrap;

  • O que faz: Controla se os itens dentro do container devem "quebrar" para uma nova linha quando não couberem no espaço disponível.
  • Efeito: Com wrap, os itens que não couberem em uma única linha serão movidos para a linha seguinte. Isso é útil para layouts responsivos, onde o conteúdo precisa se adaptar a diferentes tamanhos de tela.
  • Exemplo prático: Quando o container .apresentacao não tiver espaço suficiente para todos os itens em uma única linha, os itens extras(imagem) serão automaticamente movidos para a linha de baixo, mantendo o layout organizado.

3. gap: 2.875rem;

  • O que faz: Define o espaçamento entre os itens dentro do container, tanto horizontalmente quanto verticalmente.
  • Efeito: Adiciona um espaço fixo de 2.875rem (aproximadamente 46 pixels, dependendo do tamanho da fonte) entre os itens. Isso evita a necessidade de usar margens manuais para separar os elementos.
  • Exemplo prático: A imagem e a seção de apresentação dentro do .apresentacaoterão um espaçamento uniforme de 2.875rem em relação aos outros, tanto na horizontal quanto na vertical para não ficarem colados.

Espero ter ajudado. Conte sempre com o apoio do fórum :)

Um abraço e bons estudos!

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

Obrigado pela resposta!!