QR code component

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 1 year ago

  Heyo, it looks really good! Few small things to correct here:

  • no need for a homepage div, those styles can be applied straight on the body element
  • it's best to not set a any width on the body, it takes up a 100% by default and thats what you'll need
  • for height, you could set a min-height: 100vh on the body (min-height is always preferred here over height for responsiveness reasons)
  • no need to set a fixed height on the card itself: html elements have their own natural height, which you can increase by adding margin, if needed
  • for better responsiveness, use max-width instead of width on the card, this way it will resize on smaller screens

  Other than these, it looks very much like the original design, so well done! ^^

  Marked as helpful

  2

  ---

  

  Mayyar Zidane•200

  @MayyarZidanePosted over 1 year ago

  That's great!, Thanks@FluffyKas

  0

  

  Justyna•20

  @JustynaAleksPosted over 1 year ago

  Thank you so much!! :) @FluffyKas

  1

  

  Mayyar Zidane•200

  @MayyarZidanePosted over 1 year ago

  I tried to enhance it a little bit, Can you take a look to the code?@FluffyKas

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 1 year ago

  @MayyarZidane

  Sure, I'll leave a comment at your solution

  1

  

  Justyna•20

  @JustynaAleksPosted over 1 year ago

  So I fixed all these things and sent it on GitHub(it has the same repo and url), but i don't know if it'll update here automatically? @FluffyKas

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 1 year ago

  @JustynaAleks

  Yeah, it should update automatically if you deploy with github pages, it might just take some time. ^^

  It looks a lot better, the only thing I'd suggest now is to make this image itself responsive too, so it can resize when the screen gets smaller. This could be done like this:

  max-width: 100%;
  display: block;
  margin: 0 auto;
  

  This code snippet works for most images you'll come across so it's nice to remember it.

  Marked as helpful

  0

  

  Justyna•20

  @JustynaAleksPosted over 1 year ago

  Yay! Many, many thanks for your help! :))) I made changes and pushed it on github :) @FluffyKas

  0
• 

  Kelvin•915

  @Kl3vaPosted over 1 year ago

  Using semantic(main,section) html to avoid something popularly called div soup where you ve divs littered in your code. Also, for styling you would want to adopt relative units(rems,%,vw) and dump absolutes(px), cause they aid in building responsive sites cause they adapt to width/height changes of a screen. Absolutes are generally fixed so they play well when styling something like border-radius.

  Marked as helpful

  1

  ---

  

  Mayyar Zidane•200

  @MayyarZidanePosted over 1 year ago

  Thanks!, I will try this in the next projects.@Kl3va

  1

  

  Justyna•20

  @JustynaAleksPosted over 1 year ago

  Many thanks! @Kl3va

  2

  

  Mayyar Zidane•200

  @MayyarZidanePosted over 1 year ago

  I tried to enhance it a little bit, Can you take a look to the code?@Kl3va

  0