CSS Flexbox; Semantic HTML; Media Query

Community feedback

• 

  Sajana Wijesinghe•460

  @StormKing969Posted over 2 years ago

  Hi.

  When I looked at your css file, I saw a lot of hard coded sizes which make life harder when you want to make the website responsive. A quick fix would be to use "em", "rem", "vh" or "%" when defining sizes. In some place instead of using height or width to define the length of your container, use margin or padding to set the limits. You can also use "calc()". Use "px" sparingly.

  Marked as helpful

  1

  ---

  

  Bruno Afonso•110

  @BrunoAfonsoOliveiraPosted over 2 years ago

  @StormKing969 thanks! yeah, I was very focused using px because of the design i did using figma, and this was my error i think.

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Fala Bruno, tudo bem? Parabéns pelo desafio!

  Acabei de ver sua solução e queria te deixar duas dicas:

  1.Media query, nesse desafio aqui nem precisa usar media query, já que é só um card, bastaria você deixar o card responsivo substituindo as larguras de um valor fixo width para max-width desse jeito o card se ajusta de acordo com a tela.

  2.A imagem do NFT está perdendo as proporções fora do card, pra arruamar isso você precisa colocar display: block e max-width: 100% pra fazer com que a imagem fique dentro do container e ajuste de acordo com a tela.

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

  Essa aqui é minha solução, se você quiser usar como referência: https://www.frontendmentor.io/solutions/nft-preview-card-vanilla-css-custom-design-and-hover-effects-b8D1k9PDmX

  👋 Espero ter ajudado e continue no foco!

  Marked as helpful

  0

  ---

  

  Bruno Afonso•110

  @BrunoAfonsoOliveiraPosted over 2 years ago

  @correlucas Obrigado pelo feedback Lucas! O meu erro foi ter focado muito no design que fiz pelo figma. Tenho que estudar mais sobre responsividade também e como usar max-width, min-width e etc, sempre me confundo com isso.

  1