QR code component challenge solution with Sass
Design comparison
Solution retrospective
What did you find difficult while building the project? Adding rounded corners to qr-code image
Which areas of your code are you unsure of? Layout
Do you have any questions about best practices? How to add rounded corners to qr-code image in a different way?
Community feedback
- @MelvinAguilarPosted about 2 years ago
Hi @hakanergul ๐, good job for completing this challenge and welcome to the Frontend Mentor Community! ๐
Here are some suggestions to improve your code:
- In this solution you should not use the background property to set the image because this image has an important semantic meaning, use CSS background property if the image is not part of the content.
The border-radius CSS property is what adds the rounded corners
- For the layout use
justify-content: center;
in main instead ofjustify-content: space-around;
, this will better center the elements. - Use
margin: 0.625rem
ormargin: 10px
in thecontainer
selector so that it has some space when viewed on mobile devices. - Use
max-width: 240px
to.card
selector instead of width.
If you want to make to make an image a bit responsive:
img { width: 100%; object-fit: contain; }
I hope those tips will help you.
Good Job and happy coding !
Marked as helpful1@hakanergulPosted about 2 years ago@MelvinAguilar Thank you so much for your valuable comments. ๐
0
Please log in to post a comment
Log in with GitHubJoin 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