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

Qr-code challange

Wonski312โ€ข 100

@Wonski312

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


Hi this is my first project here. If you can give me any feedback on my code I will appreciate it.

Community feedback

@MelvinAguilar

Posted

Hi @Wonski312 ๐Ÿ‘‹, good job for completing this challenge!

Here are some suggestions you might consider:

  • Try to fix the issues indicated by the report in this solution.

To make the card a bit responsive:

  • Use min-height: 100vh to body instead of height, with this property you let the body element grow even more if necessary.
  • Use margin: 0.938rem or margin: 15px in the .qr-card selector so that it has some space when viewed on mobile devices.
  • Use max-width: 375px to .qr-card selector instead of width, also remove min-width: 375px; and width: 375px; this will make the card container a bit responsive on mobile, but no larger than 375px

I hope those tips will help you.

Good Job and happy coding !

Marked as helpful

2
Vanza Setiaโ€ข 27,795

@vanzasetia

Posted

Hello, there! ๐Ÿ‘‹

Congratulations on completing this challenge! ๐ŸŽ‰

Here are some suggestions for improvements.

  • I recommend setting the box-sizing: border-box to all elements. You can use universal selector (*) to select all elements. Setting box-sizing: border-box on the body element won't make all elements to be box-sizing: border-box.
  • Defining font sizes in px is not accessible, because the user cannot change the font size in some browsers. For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer. Avoid using them for font sizes if you wish to create an inclusive design. (Reference: MDN documentation of font-size).

I hope this helps! Happy coding!

Marked as helpful

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