Flexbox card with only one side box shadow

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Oi João Oliveira, tudo bem? Parabéns pela sua nova solução!

  O seu componente ficou muito bom, pra melhorar ainda mais, ficou faltando deixar o container e a imagem responsiva. Pra fazer isso você precisa substituir os width com max-width. A diferença entre os dois é que width tem uma largura fixa e impede do container crescer ou diminuir já o max-width permite que o container tenha uma largura máxima mas possa diminuir pra ajustar com a tela.

  Pra fazer com que a imagem pegue a lagura total do container menos o padding, vc precisa colocar display: block e max-width: 100% desse jeito ela cresce o tamanho do container e ajusta de acordo com o tamanho dele.

  img { display: block; max-width: 100%; }

  👋 Espero que essas dicas te ajudem e que você continue no foco!

  1