Submitted 4 months ago

Responsive QR Code Card with CSS variables

Mihael Shneyderis•30

@mihaelshneyderis

A solution to the QR code component challenge

Preview Code

Solution retrospective

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

It's
Uses CSS variables
It's my first project

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

I didn't know how to make the card responsive, so I searched it up and found out that I could use min(desired-with, 100%) value, which use my desired width, unless the parent container was smaller, in which case it would use its width instead of overflowing.
I didn't like having CSS resets in my main CSS file, so I created a reset.css file, and copied the resets from here

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

I used calc(x/16 * 1rem) instead of using decimal values as that would be easier to change, but didn't see anyone else using that, is that a good practice to follow?
Am I following best practices in general?

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Mihael Shneyderis's solution.

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