Responsive QR Code Component Using only HTML and CSS

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

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!

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!