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 landing page with adaptive layout

P

@Godskitchen

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
Eli Silk 240

@elisilk

Posted

Hi @Godskitchen, Congrats on finishing the challenge! ✅ Your project looks awesome and matches the design very well.

Things I like about your solution 🎉:

  • The use of SASS for your CSS
  • The inclusion of a hidden h1 tag for accessibility

Things you could improve ✍️:

  • Your solution seems to work perfectly at 375px and 1440px. However, for all the screen widths in between the frame gets bigger and smaller and has a big jump at 768px. It looks like you are adaptively sizing the font-size using vw units, which can have its benefits in some cases. But in this design, it feels like the intention was to keep the QR code frame width at 320px at all viewport sizes, and the font size consistent as well. So you might consider testing your solution at the full range of screen sizes from 320px to large screens to make sure it looks readable in all those cases.

I hope you find my feedback helpful! 🌟

Happy coding! 😎

Marked as helpful

0

P

@Godskitchen

Posted

Hello, mate! Thanks for your advice! I've just simplified my solution and removed "vw-scaling'

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