QR-Code

Community feedback

• 

  P

  Marge C.•440

  @msunjiPosted over 2 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!

  Marked as helpful

  1

  ---

  

  Joshua Covington•50

  @jcovington16Posted over 2 years ago

  @msunji Hey I do apologize for the late reply as I am just now seeing this. This is amazing feedback and I really do appreciate you taking the time out to give me some great feedback. I definitely need to take advantage of the figma files. I think I have a misunderstanding on how to actually utilize these files to my advantage while I'm trying to re-create something.

  Kevin Powell is amazing and I hate I don't watch his channel enough. I'm more of a backend engineer and I want to get better at building a full stack application from beginning to the end. In order for me to do this I know I have to get better with developing the frontend and not depend on something like tailwinds or bootstrap. Once again thank you so much for the feedback. This was definitely helpful.

  0