@correlucas
Posted
Fala Tiago, beleza? Parabéns pela sua solução!
Sua solução ficou perfeita e a parte mais dificil vc fez, agora ficou só faltando a responsividade, eu identifiquei que o que está causando o erro no card que nao faz ele contrair responsivamente, sao as larguras fixas ou width no container, no header e na section de preço.
O jeito de resolver esse problema é mudando todos width pra max-width.Para tornar sua imagem totalmente responsiva, adicione display: block e max-width: 100% e object-fit: cover para fazer o corte automático da imagem ao redimensionar dentro da coluna:
img {
display: block;
object-fit: cover;
max-width: 100%;
}
Aqui minha solucao caso vc queira usa-la como referencia: https://www.frontendmentor.io/solutions/fresh-prince-card-component-vanilla-css-easter-eggs-6Qe2CAE0H8
Continue no foco e espero ter ajudado!
Marked as helpful
@TiagoHenrique10
Posted
@correlucas Cara então não achei interessante colocar responsividade nesse card na verdade haha, mas legal sua observação no meu código não sabia dessa comando "object-fit: cover" para que a imagem ocupe todo o espaço muito legal, obrigado pela diga da responsividade irei usar no próximo desafio. alias dei uma olhada no seu card está muito legal mano curti as animações, parabéns!! esta em um nível avançado já... haha
