Skip to content
Submitted almost 2 years ago

QR Code Component, vanilla CSS only

v•110
@ughvop
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

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
    @idaomoumiPosted almost 2 years ago

    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
    @ughvopPosted over 1 year ago

    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

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