QR-Code

Community feedback

• 

  P

  Marge C.•440

  @msunji

  Posted almost 3 years ago

  Heya Joshua! This solution looks great! 👍

  I've got a couple of suggestions, but I'll try to keep em' brief:

  • You can move the attribution div out of the container div. Understandably, this'll look a little strange at first because you've got body set to display: flex. To sort this out, set the flex-direction to column and the attribution div should sit right below your QR container div. Once that's sorted, you could add a bottom margin to your container div to add a tiny bit of spacing between the two elements.
  • We can clean up your code and sort out the container div's sizing by setting a max-width. I had a look at the Figma files and it looks to be around 320px. Your container div should look something like this:

  .container {
    width: 100%; 
    // alternatively, you could use vw units, so you could do something like:
    // width: 90vw; (or any value you think looks best) instead 
    max-width: 320px;
    padding-bottom: 2.5rem;
    margin-bottom: 1rem;
  }
  

  With this set, you can remove the media-query blocks for your container div. I think that should help clean up your CSS a tiny bit.

  As for CSS resources, I highly recommend Kevin Powell's Youtube Channel. He's got a whole range of videos about responsive design and getting started with CSS.

  Hope this helped!

  11

  Marked as helpful