Submitted 4 months ago

QR code challenge

Dom Leverment• 100

@DomLeverment

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?

Proud to have finished the project, still a lot of learning to do.

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

I found it difficult to centre the container until i found out to specify the min-height 100vh in the body.

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

CSS is a big challenge for me. So any tips and advice for cleaner code would be amazing.

Community feedback

Ineke• 30

@Ineke84

Posted 4 months ago

Hi Dom, Your solution looks really good (I didn't use flexbox myself yet, but it's so logical now I see your solution).

A few things you could take another look at are:

the box of <p> falls outside .main-qr (100% width + margin)
you could avoid a fixed height by using gap and padding on your .main-qr. That way the element would also look alright if the text becomes longer.

I hope this helps :)

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