Submitted 9 days ago

HTML, CSS

Md Zafer Eqbal• 50

@MdZaferEqbal

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I was really proud when I added all the font-size, padding, margin and dimensions of the div and it was near perfect to what was the final preview provided in this challenge.

I want this near perfect to be exact same next time on.

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

I only faced one challenge and that was to align the div container in the center of the page.

I tried position absolute and left 50% and top 50% it didn't worked as expected and I did some more trial and error, but at last I used display flex to align the div at the center of the page.

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

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

Thanks for asking. But I managed to complete this challenge by myself.

Community feedback

Teresa• 40

@te-sa

Posted 9 days ago

The challenge was done well, the only nitpick I have is that the implemented QR code is a tad smaller than it is in the design. Also, I believe the repo you linked under "View Code" is private, I was not able to access it. Instead, I had to inspect the published page to see your code.

Specific feedback:

Instead of:

padding-top: 10px;
padding-right: 10px;
padding-left: 10px;

Consider:

padding: 10px 10px 0 10px;

Marked as helpful

Md Zafer Eqbal• 50

@MdZaferEqbal

Posted 8 days ago

@te-sa Thanks for the feedback and I have updated the repo visibility.

Lilla• 40

@lillakm

Posted 6 days ago

I had the exact same challenge with positioning, I got great suggestion on my solution from asimsaeed353 to use

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

instead of display: flex. It worked perfectly and it reminded me to think about the page layout a little more.

Congrats on completing the challenge!

Please log in to post a comment

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