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 Code Component, vanilla CSS only

v 110

@ughvop

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


I didn't center the component horizontally, 'cause I didn't want to complicate my first challenge by using flex or grid. Is there anyway I can center it without these two annoying layout?

Community feedback

Ida 100

@idaomoumi

Posted

Hi there! Have you tried this for centering your card horizontally and vertically? margin: 0 auto; margin-top: 20vh; or min-height: 100vh; so that it occupies 100% of the viewport height?

Then you don't need to use flex or grid.

Marked as helpful

0

v 110

@ughvop

Posted

sorry for answering this late lol,

margin-top 20vh; did help for desktop screen size which is wonderful but not in use for mobile screen, it leaves a huge space on top. thanks a lot! @idaomoumi

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