QR Code Component using CSS Grid, Flex and Media queries

Community feedback

• 

  Nasyr Akhmadov•170

  @darrowvPosted 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

  1

  ---

  

  Abdullah Yakub•40

  @developerabzPosted 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.

  1
• 

  Amal Karim ✅•1,290

  @amalkarimPosted 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

  1

  ---

  

  Abdullah Yakub•40

  @developerabzPosted almost 2 years ago

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

  0