Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive solution using Flexbox

Nelson Nzewiโ€ข 270

@nzewi

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


  • Did I need to use media queries to make this responsive?
  • What can I do to improve the site accessibility?
  • I'm unsure if my HTML is semantic, what can I do to make it semantic? Any other observations and corrections are welcome.

Community feedback

Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

๐Ÿ‘พHello @nzewi, congratulations on your first solution!๐Ÿ‘‹ Welcome to the Frontend Mentor Coding Community!

Nice code and nice solution! You did a good job here putting everything together. Iโ€™ve some suggestions for you:

Your don't need to use media queries for this challenge, this component is so tiny that making it responsive is enough to make it fit in big and small screens. You've already used max-width so there's only one more thing to improve the card responsiveness, the image is getting stretched because you've set a fixed height, remove it and place max-width: 100% and display: block to have your image resizing with the container:

img {
    display: block;
    max-width: 100%;
}
.card__img {
    border-radius: 1rem;
    /* height: 35rem; */
}

โœŒ๏ธ I hope this helps you and happy coding!

Marked as helpful

0

Nelson Nzewiโ€ข 270

@nzewi

Posted

@correlucas Thank you

0
Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

@nzewi Bro Now you can write your own feedback and show your ideas to help other person =)

0
Nelson Nzewiโ€ข 270

@nzewi

Posted

@correlucas I'm sorry about that. I didn't mean to offend you. I just thought you articulated what was in my head very well and I added it as part of my feedback. I won't do it again.

0
Lucas ๐Ÿ‘พโ€ข 104,420

@correlucas

Posted

@nzewi Thats fine Nelson I am fine. I think if you wrote your own review will be better and you'll help more person showing your point of view. I mean, you've done one challenge so you can write many reviews about the difficults you had and help other person. You already know the concepts so you can write it with your own words.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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