Skip to content
Submitted 7 months ago

Responsive QR Code

knznsmn•50
@knznsmn
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?

It's nice to have this kind of platform where I can practice and force to learn new and relevant/ things like a real project.

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

I had difficulty with the responsiveness of the site, but I think I am starting to get a better understanding of it.

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

I would love it if the masters will point me where I am wrong and where I can be better.

Code

Please log in to post a comment

Log in

Community feedback

  • Asilcan Toper•2,960
    @KapteynUniverse

    Hey knznsmn, nice job.

    Addition to what Alex said:

    Avoid using hard coded values, like width: 375px;, use max-width: 22.5rem; instead. Em/rem units are better for responsiveness. Use rem especially for font-sizes and media queries

    Images needs to have a meaningful alt texts, unless they are decorative. For this case, i think something like "QR code leading to frontendmentor.io" might be better.

    Don't need to use width: 100vw; on body, also min-height: 100vh is better.

    I recommend you to use a modern css reset for every project. You can check Andy Bell's reset too.

    Also if you used h3 tag for the size, don't do it.

    I need to cut short, making dinner :D

    Marked as helpful
  • Alex 🤸🏻‍♂️•1,710
    @sksksk2024

    Your master is always here to help, Mr. Penguin! 🐧

    First off, congratulations on completing your first project! That’s a huge achievement, and you’ve done a fantastic job. I really like how you’ve centered the design—it’s clean and visually appealing.

    For a couple of improvements, here’s what I’d suggest:

    In the body element, try adding: padding: 1rem;. This will create some space around your content so it doesn’t stick to the screen edges. For the card itself, replace width: 375px; with max-width: 375px;. Using max-width ensures that the card becomes more flexible and adapts gracefully to smaller screens.

    These tweaks will enhance the responsiveness and overall look of your project.

    Once again, amazing work! Keep up the great effort, and I’m sure you’ll continue to create even better projects. Stay consistent, keep learning, and most importantly—have fun!🔥🔥🔥

    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