Skip to content
Submitted 6 months ago

QR component cloned using HTML and CSS. Had Figma as a guide.

Daryl DB.•10
@DaRealDB
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I was able to learn box-model, a bit of css flexbox and how to do stuff.

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

I was overwhelmed at first, and I didn't know what to do. So I explored and started working and it turns out that was the only way that helped me overcome my challenge!

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

More about when and how to do flexbox and css grids

Code

Please log in to post a comment

Log in

Community feedback

  • Marzia Jalili•8,410
    @MarziaJalili

    Hey there!

    Here's a simple suggestion:

    • set the code below in the body selector to center the card:
    body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}
    • Make sure that the card is the only child element of the <body>.

    If not wrapp everything nested inside <body> with the <main> element. It will look something like this:

    <body>
  <main>
    <!-- every element nested inside -->
  </main>
</body>

    Keep up the grind🫡

    Marked as helpful
  • P
    Boris•4,110
    @makogeboris

    Great job completing your first challenge, here are some suggestions

    • Avoid setting fixed heights and widths on elements, as this can create problems with responsiveness and content fit. Instead, let the content and padding determine the element’s size. If necessary, use max-width or min-height, and prefer relative units like rem for better adaptability. Remove the width from the body, change the height to min-height: 100dvh;
    • To properly center the card, using flexbox on the body is better suited add this on your body and remove the all the margin properties from the .container-white
    display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100dvh;
background-color: hsl(0, 0%, 8%);
padding: 1.5rem;
    • Change the width of the .container to max-width and it should be defined in rem. Also, remove the height property completely.
    • Your image isn't showing because it has a wrong path change it to src="images/image-qr-code.png"
    • Use a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.

    Hope this helps, Good luck!

    Marked as helpful

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