QR-code HTML CSS Containers

Community feedback

• 

  Miran Legin•680

  @miranleginPosted about 2 years ago

  Hi Antonio,

  first of all you can remove height property from probably anywhere in CSS, it is of no good use especially on images and image containers. You can also remove <div class="text">. Next .container can have display: flex; flex-direction: column so you can space elements inside him with row-gap: [some-value]. Also you could add some padding on the .container itself to make some room for elements inside it.

  Keep coding!

  0
• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hi Antonio, congratulations on completing the challenge, great job! 😁

  Some little tips for optimizing your code:

  • add main tag and wrap the card for improve the Accessibility
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • img element must have an alt attribute, it's very important!
  • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image
  • remove all margin from container class
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • instead of using px use relative units of measurement like rem -> read here

  Hope this help! Happy coding 😉

  0