Responsive QR Code Component Using only HTML and CSS

Community feedback

• 

  Rebecca Padgett•1,840

  @bccpadgePosted over 1 year ago

  Hello @CelineTrann. Congratulations on completing this challenge!! 🎉

  I have a few tips to improve your solution below.

  Every website should have one landmark like a <main> tag

  • You can wrap your content in <main> tag instead a <div> tag which has no semantic meaning.

  HEADING TAGS

  • You should heading tags in chronological order like an <h1>, <h2> and then <h3>

  You can use CSS Grid as well to center the we code component.

  body{
  display:grid;
  place-content:center;
  min-height:100vh;
  }
  
  

  Hope this helps you and don’t hesitate to reach out to me if you have any questions

  0
• 

  RiccardoSc•200

  @RiccardocodePosted over 1 year ago

  Hi, Nice solution! I never have thought about using the translation to center a div!

  I'm personally using the display:flex; flex-direction:column; align-items:center; justify-content:center; usually with a combination of the attribute above I get the elements aligned. here for more details: https://www.w3schools.com/css/css3_flexbox_container.asp

  Happy Coding!

  0
• 

  MICHAEL REID•100

  @MAR2409Posted over 1 year ago

  Hello, good job finishing the challenge! If you're familiar with Flexbox, you can use this as a reference

  <div class="center-qr-card"> <div class="qr-card"></div> </div>

  CSS Code will look like this

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

  The class of center-qr-card is specifically targeting the card itself to be centered on the page! I truly hope this helps!

  0