Submitted 20 days ago

First challenge QR code component

Mini G•20

@MiniG-Dev

A solution to the QR code component challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm pretty proud that I can finally center a div—and I’ve started getting the hang of writing CSS too. I’ve always been fine with JavaScript and HTML, but styling wasn’t really my thing. That said, I actually enjoyed it this time since the design file was super clean.

I used to write CSS one element at a time, but I realized it's way easier to style things after the whole structure is set up. So from now on, I’ll do it that way.

What challenges did you encounter, and how did you overcome them?

I spent like 30 minutes just trying to center a div—just figuring out the best way to do it.

The best method I found was using place-content: center;, but I had to give the body a height to actually center it in the viewport.

What specific areas of your project would you like help with?

What's another all-around, cross-media approach to centering a div?

If you’ve got suggestions beyond what I’ve tried here, let me know! 🤩

Code

Please log in to post a comment

Community feedback

Harsh Kumar•5,060
@thisisharsh7
Posted 20 days ago
Great work on this submission! 👏 Your structure is clean and well-organized.

Some suggestion:
1. Centering: You used place-content: center on the body, but note that it only works if display: grid is applied. So, add display: grid to make it fully functional:
```
body {
  display: grid;
  place-content: center;
}
```
1. Responsiveness: Rather than using height: 97vh, consider min-height: 100vh for better consistency across screen sizes and to avoid issues on mobile where viewport height can fluctuate.
2. Redundant Class: .qr-code-container isn't used in the HTML—safe to remove from CSS to keep it clean.
Keep up the great work and happy coding!
Marked as helpful

Join 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