Skip to content
Submitted about 2 years ago

HTML/CSS Flexbox solution

kayleighpeng•10
@kayleighpeng
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What is the standard practice for displaying just cards in the center of a page? Specifically referring to HTML elements & structure used to make this happen

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • generieyyc•160
    @generieyyc

    Hello! I'm sharing the feedback i got before.

    For proper centering the container (whole card) vertically and horizontally, you can use code as:

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

    Hope that helps!

  • Luis Jimenez•760
    @LuisJimenez19

    Hello! Good job solving the challenge.

    Regarding your question, in this case, the HTML elements are not very relevant, since there is not much content. It's okay to use<div></div>, but it depends on the card and its function. In some cases, you can use the <header> and <footer> tags within a card. and to center elements it's fine, it's better to handle it at the container level than the element, with flex it's fine, but you can try grid and place-conent:center; and you save a line of code, I hope have cleared your doubt

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