A simple plain HTML & CSS component
Design comparison
Community feedback
- @correlucasPosted about 2 years ago
๐พHi @ssembatya-dennis, congratulations on your solution!๐ Welcome to the Frontend Mentor Coding Community!
Great solution and a great start! From what I saw youโre on the right track. Iโve few suggestions for you that you can consider adding to your code:
1.Align the main text centered:
.QR__title { text-align: center; font-size: 1.8rem; line-height: 1.5; font-weight: 700; color: hsl(218, 44%, 22%); }
2.Clean your code by removing some unnecessary divs, most of the content can stand alone without a div. Use div only for blocks that need a special alignment or the content needs a special positioning.
3.To maintain the card responsive use
max-width
instead ofwidth
this way you allow the content to be flexible. The difference betweenmax-width
andwidth
is thatwidth
is fixed andmax-width
has a maximum size but can shrink to fit the content.Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR
โ๏ธ I hope this helps you and happy coding!
Marked as helpful1@ssembatya-dennisPosted about 2 years ago@correlucas Thank you so much. Have went through your code to see how you approached this challenge and indeed you inspiring! Wow, I truly appreciate your advise on how to cleanup my code & improve on the card responsiveness and I look forward to exercise more challenges
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