responsive qr-code-component with flexbox and html

Community feedback

• 

  _nehal💎•6,710

  @NehalSahu8055Posted about 1 year ago

  Hello Coder 👋.

  Congratulations on successfully completing the challenge! 🎉

  Few suggestions regarding design.

  • To properly center the card
  • USING FLEXBOX

  body{  
      display: flex;
      justify-content: center;
     align-items: center;
     min-height: 100vh;
     ...
  }
  

  • For non-decorative images give meaningful and descriptive alt like alt= "QR code to frontend mentor website".

  • Use responsive units(rem, em, %) from next project. Explore respective use cases on google.

  I hope you find this helpful.

  Happy coding😄

  0
• 

  Nihal Buragohain•140

  @NihalP01Posted about 1 year ago

  You are doing great. Take your time and enjoy doing it.

  Few tips: I have centered this card by using these CSS properties:

  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);

  Please give it a try and play around with it.

  Another suggestion would be to give attention to the font sizes. Good luck :-)

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted about 1 year ago

  Hey, @WalanyCosta!

  Your project looks great! Congrats!

  Here are a few tips to improve it:

  You can place the card in the middle of the page doing this: body { height: 100vh; display: flex; justify-content: center; align-items: center; }

  Also, try reducing the <h1> font-size a little bit.

  Hope it helps!

  0