Skip to content
Submitted over 1 year ago

Ad with QR code in HTML and CSS

Helmuth•40
@helmdyck
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 couldn't center everything with flexbox so I used "Transform : Translate ". What is the best way to center a simple div like this? Will I always have to try all the options until I see which one works for me?

Community feedback

  • Fer•3,970
    @fernandolapazPosted over 1 year ago

    Hi 👋🏻, regarding your comment:

    You could center the content with grid or flexbox:

    body {
min-height: 100vh;
display: grid;
place-content: center;
}

    body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

    One advantage of this over using translate is to avoid page clipping in viewports with low height (such as mobile landscape orientation).

    I hope it’s useful : )

    Regards,

    Marked as helpful
    1

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