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 page using flexbox

joacomenda 170

@joacomenda

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 are you most proud of, and what would you do differently next time?

Im most proud of how the image and the text anded up aligned, I also liked how the padding ended up looking.

I woull try to find another way to center the content vertically, I used margin and flexbox but it didn´t look perfect.

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

Centering the content was hard, i tried to use a flexbox in order to center the div containg everything, the horizontal align worked perfect bvut the vertical align didnt work, so I used margin in the top.

What specific areas of your project would you like help with?

When centering the container that holds all the project (qr-image and text), I used a flexbox with justify content: center to center ir horizontally, but vertically I couldn't figure it out, I ended up using margin: 10% to do it. Is there another way to center vertically a div using a flexbox?

Community feedback

Botify 170

@BotSabin

Posted

To center vertically, set the main div's min-height to 100vh, justify-center, and items-center. I think it should work. I'll leave my code here: https://github.com/BotifyS/react-qr-code/tree/main/src

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