Submitted about 1 month ago

QRCODE with HTML and Flexbox

LarsAdams• 30

@LarsAdams

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?

Very happy to have achieved a result very close to the design. No problem with HTML.

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

Using flexboxes posed a number of problems for me.

Community feedback

Ruben de Man• 250

@developer-ruben

Posted about 1 month ago

Hi!

Great component! Here's the solution to align the component to the center, at this to the main element: display: flex; justify-content: center; align-items: center; min-height: 100vh;. This creates a flexbox container and aligns the component center horizontally and vertically. Further I recommend to look at the BEM methodology to better organize your CSS classes.

Best! Ruben

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