@correlucas
Posted
👾Fala Gustavo, beleza? Parabéns pela sua solução!
Dei uma olhada na sua solução aqui e ficou muito boa! Meu conselho seria só reduzir um pouco a estrutura de html, usando uma só div pra segurar tudo e colocar cada elemento solto lá, pq vc consegue controlar tudo com uma div só e cada elemento separado, olha a estrutura abaixo:
<body>
<main>
<img>
<h1></h1>
<p></p>
</main>
</body>
Pra deixar o container responsivo, você tem que arrumar a imagem com display: block e max-width: 100% desse jeito a imagem diminui acompanhando o component e nem precisa dar um tamanho pra ela, já que ela vai ser 100% do container menos o padding.
Em relação ao border-radius é melhor não usar porcentagem porque é uma unidade relativa e a borda vai variar quando o container escalar, ao invés disso use 12px
.content {
border-radius: 12px;
max-width: 20rem;
}
.img__container img {
display: block;
/* width: 18rem; */
border-radius: 5%;
max-width: 100%;
}
Espero ter ajudado e continue no foco!
Marked as helpful
