Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR component using CSS Flexbox and Google Fonts

Rico98 10

@CesarQD98

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison

SolutionDesign

Rico98’s questions for the community

I found difficult using flexbox when the flex-direction is set to column. Not that sure if flexbox is the only way to position the QR Component in the center of the screen. I've heard of margin: auto but couldn't make it work. Feedback is absolutely welcome!

Community feedback

@MelvinAguilar

Posted

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

  • Using display: flex; is a very common way to center elements. Another alternative is to use the grid layout.

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

    Another way to center an element is using display: absolute but it may introduce issues on smaller devices. The component might overflow or cause layout problems.

    If you choose to use margin: auto; for centering, keep in mind that it won't center vertically, only. For vertical centering, you can use flexbox with margin: auto:

    body {
      display: flex;
      min-height: 100vh;
    }
    
    .item {
       margin: auto;
    }
    

I hope you find it useful! 😄

Happy coding!

Marked as helpful

1

Rico98 10

@CesarQD98

Posted

Hey @MelvinAguilar thanks for the feedback!

I'll have a check on grid as an alternative for centering. On the other hand, I find margin a viable solution for, let's say modals; the kind of messages that covers all the screen.

Anyway, thanks again and happy coding!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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