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

Frontend Mentor - QR code component solution

Anieβ€’ 100

@A-n-i-e

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


My first challenge on frontend mentor Feel free to comment😊

Community feedback

Lucas πŸ‘Ύβ€’ 104,420

@correlucas

Posted

Hello Anie! Welcome to the Frontend Mentor community!

I'm looking your solution right now and I can see you've done a great job wrapping up all the content inside the div container, consider use main instead of div to improve the semantics. I like that your card is flexible even in smaller screens situations. The only issue you should fix is the image that is stretching with wrong proportions.

I notice that you've added some properties to the image, but what cause the image stretch is that you add width: 100%; and a different size for the height --> height: 300px; note that if you add display: block; to the image and you set width with 100% there's no need to set the height, by default this value come in automatic.

.img-box img { width: 100%; max-width: 300px; }

Hope it helps you and I want to see you around with more challenges! Keep coding!

Marked as helpful

0

Anieβ€’ 100

@A-n-i-e

Posted

@correlucas Thanks for the feedback! I have made the changes πŸ˜Šβ€‹ The name's Anie by the way β€‹πŸ™ƒβ€‹

1
Lucas πŸ‘Ύβ€’ 104,420

@correlucas

Posted

@A-n-i-e Hey Anie, sorry if I wrote your name wrong πŸ˜…, wasn't on purpose. I'm happy that the tips worked for you. Congrats. 😊

I fixed my first comment, now your name is right ❀

1

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