Responsive QR Code Component Using only HTML and CSS
Design comparison
Solution retrospective
I used transform: translateY() to vertically center my div, is there a standard way to vertically and horizontally center divs?
Community feedback
- @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 - You can wrap your content in
- @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 - @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
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord