Skip to content
Submitted 3 months ago

Flexbox used to align the main div vertically and horizontally.

Lucas Gabriel•80
@LucasGabriel2806
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 managed to make the project identical to the design, using beginner properties, and Flexbox to align the main div vertically and horizontally. I did this project once, it wasn't identical so I'm redoing it, I'm happy because I managed to fix the content well, improve the design in code form.

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

At first it was difficult to center the main div vertically, to center it horizontally I used margin: auto, but after studying more and getting to know Flexbox, I learned how to center it vertically and horizontally in a very simple way.

Community feedback

  • Riccardo Bellini•100
    @riccardobelliniPosted 3 months ago

    I would avoid using margins for the card component and center it both horizontally and vertically using flexbox:

    body {
  display: flex;
  align-items: center;
  justify-content: center;
}
    Marked as helpful
    0

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