Submitted almost 2 years ago

QR Code Component using CSS Grid, Flex and Media queries

Abdullah Yakub• 40

@developerabz

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I tried building this QR component but had trouble getting it perfectly responsive across all screens. I ended up using media queries, alongside clamp, but is there a better way I could have done this? I feel as though I am using clamp incorrectly. Any other feedback is of course greatly appreciated.

Community feedback

Nasyr Akhmadov• 170

@darrowv

Posted almost 2 years ago

Assalamu aleykum,

There is no reason to use clamp in this challenge. Just use width: 100% on img. Remove width and height from your main tag. And remove this img { max-width: calc(600px - 45px); }

Things such as fixed width and height are mainly just going against responsiveness.

Marked as helpful

Abdullah Yakub• 40

@developerabz

Posted almost 2 years ago

@darrowv Walaykum Assalam!

Jazak Allahu Khairun, this really simplifies things. I did not know I could just set the width to 100%. I will be using this from now on haha.

Amal Karim ✅• 1,290

@amalkarim

Posted almost 2 years ago

Hi Abdullah,

It's interesting. I didn't know that css clamp exists! It's surely nice to know that. Thanks.

Your solution is already great. Let me give you two suggestions only:

Remove height: 70vh; from main, as that could ruin the card design when the browser height is less than the card's height..
Give padding: 20px; or whatever pixel you prefer to the body to make the page nicer.

Hope this helps. Happy coding!

Marked as helpful

Abdullah Yakub• 40

@developerabz

Posted almost 2 years ago

@amalkarim Hi Amal, This really fixed the height problem I was having on some devices. Thank you so much!

Please log in to post a comment

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