Skip to content
Submitted almost 2 years ago

Responsive card using % sizes, set with display: flex

Marek Witkowski•10
@mwitkowski96
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 did you find difficult while building the project?

  • I wasn't sure how to center the card in viewport.

Which areas of your code are you unsure of?

  • I'm just thinking about all these margins, to seperate elements. Not sure if that's the best way to do it.

Do you have any questions about best practices?

  • Is the HTML structure correct?

Community feedback

  • Curtis•30
    @cl8396Posted almost 2 years ago

    • You can use display: grid place-items: center on the body to center the element in the middle of the page. I woudn't use this if there is more than one element in the body.

    • To create the required spacing, margins can defintely work. To cut down on writing lots of the same CSS, you could use a utility class like the one outlined here

    • The HTML structure looks good to me.

    • I would make sure your sizing adheres closer to the design.

    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