QR static card using HTML CSS

Community feedback

• 

  Acme Gamers•295

  @AcmeGamersPosted over 2 years ago

  Hey there 👋,

  Congratulations on completing the challenge 🎉! I really liked the way how you used width: min(30rem, 100%); to size the card's background 😀.

  Also, here are some ways through which you can improve your code more:

  Semantic HTML

  Semantic HTML improves the SEO of the website by giving more meaning to your HTML code, and it is a good practice to wrap all of your frontend code inside a <main> tag. In your case, it will go as:

  <main>
       <div class="contenedor">  ... </div>
       <p class="attribution">  ... </p>
  </main>
  

  Centering Elements

  For centring elements on the screen, there are 3 ways from which we can do so with ease, and for this one, I will go with flexbox. Now considering you have added the <main> tag into your code, we normally do this:

  .main {
       min-height: 100vh; // Catches full screen-height and can expand when more content is added
       display: flex;     // Flexbox
  
       flex-direction: column;     // Aligns your elements vertically [ div and p tag ]
       align-items: center;        // Center Elements Horizontally
       justify-content: center;    // Center Elements Vertically
  }
  

  This way, you won't need to use margin: 12.5% auto; on the contenedor class, helping you to align other elements more properly. You can try adding each line at a time from the above CSS code to understand how the flexbox works.

  Looking forward to seeing your amazing work in the future and hope this helps 😊

  Marked as helpful

  0

  ---

  

  Dust98•130

  @Dust1100010Posted over 2 years ago

  @AcmeGamers wow thanks you so much! i appreciate ✌

  1

  

  Acme Gamers•295

  @AcmeGamersPosted over 2 years ago

  @Dust1100010 You're welcome 😊, I'm glad it was helpful for you. Also made a small update, try using min-height (good CSS practice) instead of height only, that way it can expand whenever the content reaches more than the screen height.

  Marked as helpful

  1