Skip to content
Submitted 17 days ago

QR Code Challenge

Ben Weinstein•20
@brweinstein
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

What are you most proud of, and what would you do differently next time?

Learning the basics of HTML and CSS. This acts as my first project.

What challenges did you encounter, and how did you overcome them?

I had trouble with centering the content on the page and learned that I could use flex display.

What specific areas of your project would you like help with?

Is there a different way to center the contents of the page without a flex display? What are some other general ways to optimize the code?

Community feedback

  • Alper•1,090
    @adonmez04Posted 16 days ago

    Hi Ben Weinstein.

    Centering an element is a little tricky. You can use margin-inline: auto to center it horizontally. However, you should explicitly declare a width value for the element itself. If the width value is auto (it is the initial value), margin-inline: auto will render 0. So it will not work... Also, giving an explicit width value will break the browser's responsive behavior. This is why we should use max-inline-size (or max-width) instead of width. You can try your div element with margin-inline: auto and it will be centered horizontally...

    For vertical centering, the containing block should have some extra space to distribute it. For your solution, this is the body element. Remove display: flex and give it to place-content: center and keep the height: 100vh. place-content: center will center its direct child element vertically without using display: flex or grid. This is a brand new feature, and the containing block should have some extra space.

    Marked as helpful
    1
    Ben Weinstein•20
    @brweinsteinPosted 16 days ago

    @adonmez04 Thank you very much for your detailed reply. I will consider this in my future projects.

    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