Skip to content
Submitted over 1 year ago

QR card with basic css, flexbox and no js

mihai2537•190
@mihai3636
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello!

  • I'm not entirely sure if the mobile responsiveness part could be considered as done only by the max-width trick that I applied on the container. The picture of the mobile design looked quiet the same to me so I thought that nothing should be done about it.

  • Also, I'm not sure if I used the information from style-guide.md correctly regarding the Desktop width. I just applied 1440px to the most outer container but it looks strange on my screen.

  • Please let me know if you have any tips about anything at all. I'd really like to learn more about good practices but I don't know where to go from here.

Thanks for reading!

Code

Please log in to post a comment

Log in

Community feedback

  • Atef Zaky•180
    @AtefZaky

    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
  • Kirsten ✨•460
    @ofthewildfire

    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

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