CSS properties for a QR-CODE component

Community feedback

• 

  dbmourits•60

  @dbmouritsPosted 8 months ago

  You did a pretty good job.

  i see you used both "display: flex" and "position: absolute" i would advise to only use "position" if it is absolutely necessary. In my opinion you could remove the (position, top, left and transform in .qrcode) and try playing with padding (and margin) around objects.

  Starting with "display: flex" is good practice. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  position can be helpfull when you want to move things more independently/fixed from the rest of the code and or make objects interactive. Maybe the following website helps you a little further in your understanding about position: https://css-tricks.com/almanac/properties/p/position/

  Marked as helpful

  0

  ---

  

  LLL0908•40

  @LLL0908Posted 8 months ago

  Thank you for sharing the websites! They are so clear and understandable. I'm sure that they will be of great help to me.

  0
• 

  Boris•2,850

  @mkborisPosted 8 months ago

  Hi LLL0908, great job, here are some feedback

  • On your body element you have a typo should be display: flex not felx, I guess that's why you had to use position: absolute and transform: translate on your .qrcode to center it, you can delete those lines. Also add a min-height: 100vh, flex-direction: column on your body.
  • All content should be wrapped within landmarks. Wrap a main tag around your qrcode and a footer for the attribution.
  • Your .qrcode should have a max-width in rem not width. Try as much as possible to avoid setting fixed widths and heights on elements, use max-width or min-height if you have to.
  • Consider using a modern CSS reset at the start of the styles in every project. Like this one modern css reset.

  Marked as helpful

  0

  ---

  

  LLL0908•40

  @LLL0908Posted 8 months ago

  Thank you for your feedback! They are very helpful and I have applied them. By the way, I'm surprised that you can catch my spelling mistake since I thought no one will read my code. All in all, i'm soooooo grateful that you gave me this feedback.

  1
• 

  Przemysław Rajn•40

  @rzuaniskoPosted 8 months ago

  For me, that's realy nice work. U have good proportion, but u can add biggest margin-top on your .container.

  0