QR code component using html, css flexbox
Design comparison
Solution retrospective
For this small project I decided to use internal CSS, so there is no separate file. In some parts I feel like my css code can be improved, it looks a bit too long.
Also had some trouble with border radius, I thought applying the same amount to both container and image should be fine, but I didn't like the result. So I applied 3% and 7% and it looked better, but not sure, what is the reason for this?
Moreover, couldn't manage making three lines of text instead of just two, any ideas how to do that? Changing container width didn't help.
Any comment and feedback will be appreciated.
Community feedback
- @hitmorecodePosted about 1 year ago
Nice well done. Just a few tips.
- Try to avoid writing css inside the html, even if it's just a small project always make an external css file.
- If you just want to round the corners, don't use %, use px or rem instead.
- As for your problem with border radius, try doing it like this. First add a border radius to the image, after that sum the size of the border radius of the image plus the distance between the image and the edge of the card and apply that to the border radius of the card. Whit this you should have a nice inner and outer radius
Marked as helpful1@nadezhda-frunzaPosted about 1 year ago@hitmorecode thank you for your feedback, helpful tips! Haven't thought of using px/rem instead of %, will try that.
0
Please log in to post a comment
Log in with GitHub
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