The amazing QR Code

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Hi

  This is not a good way to center the card on the page. Instead, set the body to min-height: 100vh; and use flexbox column and properties to center it. When you position absolute something it’s like you are taking it out of the document flow completely, lifting it off the body so it loses its layout context. It’s very rare you’ll want to do that with chunks of content

  Other general feedback for you

  • you are missing a heading element
  • the card needs to be wrapped in a main element and the attribution in a footer. These are called landmark elements and are one of the ways a page gets structure and meaning
  • the alt text on the image would be improved if it said where it was a QR Code for as well Eg “QR code to” (this url)
  • you don’t need a media query in this challenge. The font size doesn’t need to change (and generally not good practice to use keywords for font sizes anyway) and nor does the width. Instead, just set a max-width on the card at the start as that is relevant for all screen sizes but will allow it to shrink on small mobile screens if it ever needs to. The card never needs a width (it can optionally be width 100% as well as the max width in px or rem but that probably isn’t needed)
  • similarly the image doesn’t need a width or height in px. It can be display block and width 100%. The cards padding will stop it hitting the edges
  • font famil and text align don’t need setting on the title and text. Both of these properties inherit, so you can just declare once on the body or main card
  • you don’t need to add display block on a paragraph tag (it’s already display block)

  Overall I hope you can see you’re just overcomplicating this a bit. Follow the tips and try to keep it simple.

  I hope this helps

  Marked as helpful

  2

  ---

  

  P

  Hazel Dotson•300

  @Hazel-BlackPosted over 2 years ago

  @grace-snow thank you so much for all this feedback. This was my first time working on a project without a YouTube tutorial and the speedy response is awesome! Once again thank you so much I look forward to updating this and resubmitting .

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  @Hazel-Black don’t resubmit! Just update the code, push that’s all you need to do

  0

  

  P

  Hazel Dotson•300

  @Hazel-BlackPosted over 2 years ago

  @grace-snow thanks! will do.

  0

  

  Emmanuel Oludare•460

  @EmmanuelOludarePosted over 2 years ago

  @Hazel-Black Can we code together?

  0

  

  P

  Hazel Dotson•300

  @Hazel-BlackPosted over 2 years ago

  @Michaelhybrid yes i would love that

  0

  

  P

  Hazel Dotson•300

  @Hazel-BlackPosted over 2 years ago

  @Michaelhybrid are you on the slack channel, if so we can set up a zoom call if you want to dm me

  0

  

  Emmanuel Oludare•460

  @EmmanuelOludarePosted over 2 years ago

  @Hazel-Black yes, can I have your username?

  0

  

  P

  Hazel Dotson•300

  @Hazel-BlackPosted over 2 years ago

  @Michaelhybrid it should just be hazel black with the same image

  0

  

  Emmanuel Oludare•460

  @EmmanuelOludarePosted over 2 years ago

  @Hazel-Black ok, I'm texting you rn

  0

  

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  @Michaelhybrid @hazel-black can you stick to messaging on Slack please or start a new comment thread on here. I am getting an email for every response to my original comment. No more pleeeeease x

  0
• 

  Felipe•130

  @freefrozzteaPosted over 2 years ago

  Hi Hazel Congratulations congratulations on finishing the challenge. Adding to Grace comments, you are missing units in the box-shadow for it to work

  I hope this helps

  Marked as helpful

  0

  ---

  

  P

  Hazel Dotson•300

  @Hazel-BlackPosted over 2 years ago

  @freefrozztea thank you so much!

  1