QR card with basic css, flexbox and no js

Community feedback

• 

  Atef Zaky•180

  @AtefZakyPosted about 1 year ago

  Hello! congratulation on completing your first challenge 🤟

  I have some suggestions to make it better and I will try to answer your questions🔽

  • in the mobile view you should give some padding to the container to make space between the card and the browser window in extra small devices. and change the height: 100vh to min-height: 100vh like that when the device's height is small your content will take up its space and the scroller will appear

  • in this challenge, you don't need to give the container max-width because the content doesn't take the full screen but when you make this you will need to give the background color to the body or the parent of the container to see the background on a large screen.

  I hope this helps you, overall nice solution, happy coding 👨‍💻

  Marked as helpful

  1

  ---

  

  mihai2537•190

  @mihai3636Posted about 1 year ago

  Hello! Thank you! It's good to be here!

  Yeah, just before you posted this reply I also noticed something was off with the mobile version and I added the html { font-size: 50%; } trick for smaller devices.

  The padding to the container seems like a really clever idea and I will add it right away.

  The rest of the feedback is helpful as well.

  Thanks a lot, have a great day!

  0
• 

  Kirsten ✨•460

  @ofthewildfirePosted about 1 year ago

  Hi! Your solution is really great

  • In terms of the responsive design, you're correct, for this small component, what you've done with the max-width trick is more than enough, its all you needed to do.

  I only have a few suggestions, you currently have a height: 100vh on your .container - this unfortunately cuts off the content when you zoom in, changing this to a min-height: 100vh would solve this. You are also using display: flex in your container class, which means your alignments using align-items and justify-content is handling the centering both vertically and horizontally, making your margin: 0 auto redundant.

  I hope this helps, its a perfect to me solution though. Well done~ :)

  Marked as helpful

  1

  ---

  

  mihai2537•190

  @mihai3636Posted about 1 year ago

  @ofthewildfire

  Thank you for taking your time, this information is really helpful. Learned something new about the min-height 100vh and the zoom thing. It took me a while until I figured out what was the issue, but I tackled it down.

  0