Skip to content
Submitted over 2 years ago

QR code site using margin for layout

Jasper•40
@Jasper-Ik
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 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

Community feedback

  • Juan Bonilla•610
    @juanpb96Posted over 2 years ago

    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.

    0
    Jasper•40
    @Jasper-IkPosted over 2 years ago

    @juanpb96 wow Thank you very as this is so helpful would try this chnges 😃

    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