Responsive QR component made with HTML & CSS

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 2 years ago

  Hello Jorge, You have done a good work! 😁

  Some little tips to improve your code:

  • add main tag and wrap the card for improve the Accessibility
  • also you can use article tag instead of a simple div to the container card for improve the Accessibility
  • to make it look as close to the design as possible remove heigth to .card class
  • remove all margin from .card class
  • use flexbox to the body to center the card. Read here -> best flex guide
  • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
  • instead of using px or % use relative units of measurement like rem -> read here

  Keep learning how to code with your amazing solutions to challenges.

  Hope this help 😉 and Happy coding!

  Marked as helpful

  0

  ---

  

  Jorge Adalberto•100

  @yorchAdalbertPosted almost 2 years ago

  @denielden Hi Deniel, I'm so happy for your feedback. I've learning a ton with this challenges and of course your tips. Thanks so much. Time to keep rocking...

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted almost 2 years ago

  @yorchAdalbert You are welcome and keep it up :)

  0
• 

  Adriano•38,100

  @AdrianoEscarabotePosted almost 2 years ago

  Hi Jorge Adalberto, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:

  A tip to facilitate the responsiveness of the project is to use absolute measurement units in consuming larger or maximum width! and leave the relative units of measurement only for younger children!

  To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

  body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      min-height: 100vh;
  }
  

  The rest is great!

  I hope it helps... 👍

  0

  ---

  

  Jorge Adalberto•100

  @yorchAdalbertPosted almost 2 years ago

  @AdrianoEscarabote Thanks for helping me out, with this new implementation the responsiveness of the component increased a lot.

  1

  

  Adriano•38,100

  @AdrianoEscarabotePosted almost 2 years ago

  @yorchAdalbert happy coding!!

  0