Skip to content
Submitted over 2 years ago

QR Code Component

Alex•120
@Alexr6667
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?

Completing the project.

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

Understanding CSS

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

Understanding CSS

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    👾Hello Alex, congratulations for your first solution and 😎 welcome to the Frontend Mentor Coding Community!

    Great great solution! Its everything good made here, you've the card component design matching all requirements, component and image fully responsive. The only thing about responsiveness you can improve is to add a margin to main like margin: 20px to avoid it touching the screen edges and reduce the code.You can build this with a simple approach, without using unnecessary divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading and paragraph.

    See the structure below:

    <body>
<main>
<img>
<h1></h1>
<p></p>
</main>
</body>

    👾My rating for this solution: ⭐⭐⭐⭐⭐

    👋 I hope this helps you and happy coding!

    Marked as helpful
    1
    Alex•120
    @Alexr6667Posted over 2 years ago

    @correlucas Thank you for the detailed review. The explanation about simplifying my code was really helpful. I am a little confused at your description of adding 20px of margin to the main. Could please explain this further?

    1
    Lucas 👾•104,340
    @correlucasPosted over 2 years ago

    @Alexr6667 When you scale the window the content start to get narrow and the card start to touch the screen edges, to avoid that you can a margin: 20px to create a gap between the card and the screen bound.

    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