Entrar Ainda não tem acesso?
3
respostas

Pequena mudança no projeto

Referente ao curso HTML e CSS: trabalhando com responsividade e publicação de projetos, no capítulo Repositório do GitHub e atividade Projeto final do curso

por Rodrigo Raiter Mathias
| 55.5k xp | 65 posts
Desenvolvedor de software

Bom dia, fiz uma pequena mudança no código, queria dispor uma citação abaixo da imagem ( onde está escrito: "Desenvolvido por Rodrigo Raiter Mathias", porém, isso implicou em que diminuísse minha imagem, é não é o que eu gostaria, como possso resolver? Trecho do about.html: 

<div class="apresentacao__imagem__texto">
        <img src="assets/fotonopc.jpg" class="apresentacao__imagem" alt="Rodrigo tirando uma selfie com a tela do computador,
         na tela, o conteúdo da página Web desse arquivo">
        <p class="apresentacao__imagem__texto__citacao">Desenvolvido por Rodrigo Raiter Mathias</p>
</div>

Trecho do styles.css:

.apresentacao__imagem__texto{
    display: flex;
    align-items: center;
    flex-direction: column;
    
}
.apresentacao__imagem__texto__citacao{
    font-size: 1.5rem;
    color: var(--cor-terciaria);
    font-family: var(--fonte-terciaria);

}

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

3 respostas
por Renan Lima
| 3704.8k xp | 7841 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Rodrigo.

Tudo bem?

Isso acontece porque você envolveu a imagem e o texto com uma <div> e isso está correto, só que agora quem controla o tamanho da imagem agora é essa <div>, por exemplo, se você colocar na imagem um width: 100%;, ela vai preencher 100% da largura total, só que da <div>, ai você vai precisar mexer no tamanho dessa <div> para ver a mudança, a menos que você diminua a imagem. A gora, você pode aumentar o tamanho da imagem para que fique adequada ao texto, o legal seria utiliza a medida relativa em porcentagem "%", tipo, começa com width: 50%; e aumenta ou diminui de acordo com o resultado que deseja.

Espero ter ajudado. Qualquer dúvida manda aqui. Valeu.

por Rodrigo Raiter Mathias
| 55.5k xp | 65 posts
Desenvolvedor de software

Legal! Se eu aplicar a mesma classe que usei pra mexer na imagem, dentro da DIV, já resolve ou se torna 50% de 50%? virando 25% ( sei que pode ser um pouco de viagem hahaha). Pensando bem, se eu colocar 50% de width na tag

, afetaria também o texto, certo? Gostaria que o texto ficasse igual. Tentei alterar a width da div, porém não pareceu surtir efeito visual.
por Renan Lima
| 3704.8k xp | 7841 posts
Alura Scuba Team Apoio Educacional - Alura

Sim, se você alterar a largura da <div> vai refletir para a imagem e para o texto, você pode definir uma largura de 100% para imagem e para o texto, ai ambos vão ocupar 100% da <div> , ai você pode controlar a largura da <div>, entendeu?