Skip to content
Submitted about 3 years ago

QR code site using margin for layout

Jasper•40
@Jasper-Ik
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I had in mind for the layout to use display flex to center the container but the footer portion just had to make it a two column layout so i opted for using margin auto

Code

Please log in to post a comment

Log in

Community feedback

  • Juan Bonilla•610
    @juanpb96

    Hi Jasper 👋

    Good job on your solution! 👍... As you want to use flex to center your content I will give you one idea for you to try.

    In your body set width to 100% and height to 100vh, this takes the total size of the screen (set margin to 0, just to prevent horizontal scrolling). Then, add display: flex and flex-flow: column to keep the layout that you want. To centralize your content use justify-content: center and align-items: center, this will do the magic 🧙. Finally, remove margin in your .container class.

    Another thing I saw is that you have 'Document' as your page title.

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