Submitted about 3 years ago

QR Code with CSS

@oallelsefailo

A solution to the QR code component challenge

Solution retrospective

Since i found that this is pretty much the same concept as the preview card challenge, most of it was just reusable. Although I was having problems getting my text to drop down a line without increasing the font size.

Code

Please log in to post a comment

Community feedback

Vanza Setia•27,715
@vanzasetia
Posted about 3 years ago
Hi, Brandon! 👋

Congratulations on finishing this challenge! 🎉

I notice that on mobile view, the card is getting squished. It happens because of the width: 24%; on the .container. I would recommend only setting a max-width with fixed value, like px (or even better rem unit). By default, div element would have 100% width. So, all you need to do is to set max-width to limit how much width the card can have. This way, the card is allowed to grow until a specific amount but still allow it to shrink if needed.

For the text content, you can play around with the padding of the card. You can try to increase it slowly until the text content breaks into two lines the way you want. Of course, you can combine it by changing the font-size and the padding of the card until it looks similar to the design.

That's it! I hope this helps. 😊
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