Responsive QRcode Card using CSS Grids

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hello Chris, You have done a good work! 😁

  Some little tips to improve your code:

  • use main tag to wrap the card and improve the Accessibility but not as a container of that one element
  • 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!
  • add descriptive text in the alt attribute of the images
  • remove all margin from main because with grid they are superfluous
  • instead of using px use relative units of measurement like rem -> read here

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  Marked as helpful

  1

  ---

  

  Chris Johnson•60

  @imjustamygdalaPosted about 2 years ago

  @denielden Thank you very much for the comment and I will most definitely implement these improvements!

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  @imjustamygdala You are welcome and keep it up :)

  1

  

  Chris Johnson•60

  @imjustamygdalaPosted about 2 years ago

  @denielden I've now updated the code base and after a lot of testing and new iterations, I think I've got it about as close as I can get. I believe the screenshot comparison is a bit off, or there is some discrepancy between Chrome's Dev Tools and what's captured by frontend mentor, but I'm fairly satisfied with the end results.

  I've updated the <main> tag and reworked the <div> tag as an <article> tag so that's it's not a container for just one item. The idea is that if I wanted to add more <article> tags to add more cards, then I should be able to simply define the columns in CSS.

  I've also added an alt attribute, and hopefully gave it a useful description.

  As far as using px, I tried to use rem/em where applicable. I determined the card is 350px's wide, so I hard coded the value to help with some sizing issues.

  I also setup Flexbox for the cards content tags, and that seemed to help out tremendously, however, I still feel like I couldn't get the image to scale down properly.

  I probably struggled the most with getting the cards content to scale to any defined values for their parent container, or at least that's what I spent most of this refactor doing.

  Thank you again for the advice and encouraging words!

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  @imjustamygdala Good job! it was a pleasure :)

  1