Skip to content
Submitted 3 months ago

Responsive QR card

accessibility, bem, vite
Amit Shaw•40
@iamitshaw-1998
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I have make this assignment responsive.

What challenges did you encounter, and how did you overcome them?

Image overflow issue at smaller-screen sizes. Resolved issue by using media query.

What specific areas of your project would you like help with?

How to make website responsive?

Code

Please log in to post a comment

Log in

Community feedback

  • Harsh Kumar•5,820
    @thisisharsh7

    Great work, Amit! 👏 You've done a solid job making this QR code component responsive and accessible. Here's some detailed feedback:

    👍 What’s working well:

    • Semantic HTML usage (<figure>, <figcaption>) is well done.
    • The use of CSS custom properties makes color management scalable.
    • Responsive scaling via clamp() is excellent — clean and modern.
    • Accessibility is considered with proper alt and ARIA labels. 👍
    • Good use of a reset.css to maintain cross-browser consistency.

    🔍 Suggestions for improvement:

    • You mentioned the image overflow issue — nice catch! Your use of media queries helped solve it well. You could explore using container queries in the future for more flexibility.
    • Consider adding a subtle box-shadow to the .card to visually elevate it. Use tools like this box-shadow generator for inspiration.
    • Padding inside .card__information could be reduced slightly on mobile for better spacing.
    • You could also explore reducing the vertical margin on .card__information when screen width is small to improve layout flow.

    You asked how to make a website responsive — you're already on the right track! Use relative units (em, rem, %, vw/vh) and media queries. Also consider using flexbox or grid layout with minmax() and auto-fit for dynamic scaling.

    Great job overall! Keep building! 💪🚀

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