QR-code-component-main

Community feedback

• 

  Kimo Spark•2,190

  @kimodev1990Posted 11 months ago

  Really great work on completing the challenge, Just few feedbacks :-

  • Wrap your container under main tag, for example :

  <main>
  <div class="container"></div>
  </main>
  

  • To center your container in the middle of your website, Instead of using margin: 100px 0 0 550px ; , You could add in the body :-

  display: flex ;
  justify-content: center ;
  align-items: center ;
  min-height: 100vh ;
  

  then your container will be centered.

  • In the future, It's better to assign percentage values instead of definite values for making flexible & responsive design. For example, Instead of width: 240px : in your image ,you could assign width: 90% ;, so the width of image is 90% in relative to width of container in different viewport dimensions .

  Hope you find this Helpful.

  Other than that, Nice work & Keep going on....

  Marked as helpful

  1
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  Hello @Eyu32

  Your project looks great!

  I have one minor suggestion for you to improve it:

  • If you add height: 100vh and align-items: center; to the body, your card will be placed in the middle of the page. You can do like this:

  body {
      height: 100vh;  /* here */
      display:flex ;
      flex-direction: column;
      justify-content: center;
      align-items: center; /* and here */
      font-family: sans-serif ,"popins";
      background: rgb(204, 219, 231);
  }
  

  By doing that, you don't need margins or paddings to move the card from the borders.

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  1