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 component for mobile (375px)

Christina 90

@teenabobeena

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


All feedback encouraged and appreciated.

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Hello @LadyLucyfurr!

Your solution looks great!

I have just one suggestion for improvement:

  • Since this project is not responsive (mobile and desktop version are pretty much the same), you can change just one part of your code to make your project fit for both mobile and desktop:

You set width: 85vw;. This will make your card occupy 85% of the viewport width on all screen sizes. That's why it gets so big on desktop version.

To fix that, you can set a fixed width value, like 360px, for example. By doing that, your card will have a fixed width and won't overgrow on bigger screens. In this case, using fixed values like px is not a problem, because like I said before, desktop and mobile versions are the same.

I hope it helps!

And happy new year! 😊

Marked as helpful

1

Christina 90

@teenabobeena

Posted

@danielmrz-dev I have updated the width to px. Thank you so much for your valuable feedback!

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