CSS QR code - First Newbie challenge

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted over 2 years ago

  Hi Sarah, good job! I took some time to look at your code and have some ideas for improving it:

  • add main tag and wrap the card for improve the Accessibility
  • centering a div with absolute positioning is now deprecated, it uses modern css like flexbox or grid
  • try to use flexbox to the body for 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 try to use relative units of measurement -> read here

  Overall you did well 😉

  Hope this help and happy coding!

  Marked as helpful

  2

  ---

  

  Sarah Watkeys•30

  @SarahWatkeysPosted over 2 years ago

  @denielden Thank you. This is exactly the sort of feedback I needed but didn’t have the questions to ask. (It will also help with my website assignment due end of April, as key requirements include accessibility and responsiveness, plus of course any future site development). I’ve already changed the first div tag to a main tag, and the second to a footer tag, but not uploaded. Will have a look at the rest after work tonight. Thank you :)

  1
• 

  zoleee98•250

  @zoleee98Posted over 2 years ago

  Hi. Nice job, you can actually do width: 100%; on that div and just text align: center; or just make a flexbox from div and justify-content: center; Let me know if that works

  Marked as helpful

  1

  ---

  

  Sarah Watkeys•30

  @SarahWatkeysPosted over 2 years ago

  @zoleee98 Thanks heaps. The width property was what I was missing when I attempted the text-align earlier. I was getting so frustrated with this issue! Thank you :)

  1