Submitted 3 days ago

QR Code Component using CSS Flexbox

mina• 30

@minahopgood

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 completed this challenge within an hour. Usually when working with Flexbox it takes a little longer as I am still new to both CSS Flexbox and Grid. Using a cheat sheet and Stack Overflow I was able to figure out where I went wrong relatively quickly.

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

The main issue I faced was positioning the body in the centre of the screen. I always forget about setting the position in CSS, and this is what took the longest to figure out. Once I did, the solution was obvious.

However, when setting the body to position: fixed;, the footer appeared at the top of the screen. I fixed this simply by setting the footer to position: fixed; as well, and the problem was fixed.

Community feedback

KapteynUniverse• 870

@KapteynUniverse

Posted 3 days ago

Hey, nice job.

You can easily center the element with flex and grid. With flex you just need this:

body{
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
min-height: 100vh;
}

Also avoid hard coded values like width:320px. Since this challange is small, there isn't a problem here but it will cause responsiveness issues for the future projects. Using max-width:320px, max-width:20rem even would be better.

Using em/rem units instead of pixels recomended for responsiveness and accesibility. Kevin Powell has a couple of videos about them, one is this one, might give you the idea.

Marked as helpful

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