Skip to content
Submitted about 1 month ago

QR Code Component using CSS Flexbox

mina•60
@minahopgood
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

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•2,170
    @KapteynUniversePosted about 1 month 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
    2

Please log in to post a comment

Log in with GitHub

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