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

Responsive QR Code

Joe 30

@YoussefGaafar

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Positioning the Container class in the middle of the screen. I have solved this issue by flexbox.

Community feedback

Mahmood 1,270

@MahmoodHashem

Posted

Hello there.

Congratulations on completing the challenge.

Centering a card using Flexbox is a great way,

Here is another way I recently realized:

  • give the body a height of 100vh and use align-content: center to center the card vertically, and use margin: auto in card to center the card horizontally. You can achieve this with just two properties.
body{
height: 100vh; 
align-content: center; 
}
.card{
margin:auto
}

Marked as helpful

1

Joe 30

@YoussefGaafar

Posted

Thank you so much mahmoud for your feedback. I will definitely consider this approach when needed.@MahmoodHashem

1

@Austinjnr

Posted

the layout looks good

Marked as helpful

1

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