Responsive QR Code page
Design comparison
Solution retrospective
Proud Of: The page successfully adjusting to different view-page sizes so the QR code and text don't get warped.
Differently: Not that much approach wise besides trying to figure out how to get the page to look like the original.
What challenges did you encounter, and how did you overcome them?The main challenges I faced were trying to get the aspect ratio of the image to look normal and importing and using external font sizes. Both were solved by looking up methods online.
What specific areas of your project would you like help with?I would like help with adjusting the image size so that the space it takes up in the card is more align to the original version
Community feedback
- @TheMcnafahaPosted about 2 months ago
Hello @TuetrungNguyen!
I like that you picked tailwind for your CSS solution. It shows that you understand how to use the modifiers to make a responsive website.
As for your question regarding image size, I noticed you used a background image with the width value of 100% (w-full bg-code bg-cover). This is a good approach if you don't have a target size as the image will grow. If your goal is to have more control over the image, then putting the image in a container element with a max-width should do the trick.
My only other tips are about how to best use Next js, but these are minor concers (eg the title tag), so I'm not sure if they're the best use of your time.
Keep coding and have fun!
0
Please log in to post a comment
Log in with GitHub
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