3 Card Component

Community feedback

• 

  Lucas Richard Garcia Tinoco•50

  @lucasrgtPosted over 1 year ago

  Good job on completing the challenge Augusto.

  There's some points you can change in your code to improve it.

  Semantic HTML:

  You can wrap your card conteiner div to the <main> tag.

  You can change the attribution container to <footer> tag too.

  Structural Problem:

  In your body you've put 200svh, that's the double of the amount of the viewport size, so it expanded your view and distorted the website structure.

  Use 100svh instead with a fallback to 100vh.

  body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; height: 100svh; font-family: Lexend Deca; background-color: hsl(0, 0%, 95%); }

  Insteand of using px values into your components, i suggest you to learn how to use rem and em units, it's better for most of the cases (responsiveness).

  Avoid putting width and height constraints into text elements like:

  p { max-width: 100%; }

  instead, wrap it into a div and put the width on the div.

  Thats it! Keep going.

  1