QR Code First Solution using margin and padding

Community feedback

• 

  P

  Liam•360

  @asmthliPosted 3 months ago

  Hi,

  I'm not sure where I got the shadow on the QR code in all honesty lol. I put one on my solution but I think I meant to put it on the whole card itself. Looking at it now, there seems to be a subtle shadow at the bottom of the card, so it looks as if it is raised from the page slightly.

  Either way, it's just one of these: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

  If you Google 'css box shadow' there are websites which allow you to visually tweak a box shadow and then copy paste the css over.

  Sorry for the confusion.

  For the centring, I was doing this:

  body { height: 100vh; display: flex; align-items: center; justify-content: center; }

  Marked as helpful

  0
• 

  P

  Liam•360

  @asmthliPosted 4 months ago

  Looks good to me. If I had to nit-pick a few things:

  • Missing the shadow on the QR code image.
  • The card isn't vertically aligned with the page and so does not stay centred when you zoom out. Consider making the body element 100% of the viewport height and using flexbox to vertically align, rather than using top-margin as you have.

  Marked as helpful

  0
• 

  Anteonallen•50

  @AnteonallenPosted 3 months ago

  Hey Alan,

  Thank you for your feedback, when you mentioned the shadow on the QR code image, do you have the command/coding example for it? Personally, I can't tell the difference between my design and its solution.

  Also, for the body element 100% of the viewport height, is this the right command? body { height: 100%; }

  0