Html e Css

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  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

  1

  ---

  

  Tiago Henrique•110

  @TiagoHenrique10Posted over 2 years ago

  @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

  1