Design comparison
Solution retrospective
I would like to get help about responsive design and writing cleaner and minimalistic css
Community feedback
- @geomydasPosted 5 months ago
I just edited your code and removed and added some lines. First of all, max-widths should be a fixed width most of the time. It always should be paired with a width whose unit is a responsive unit.
Example is; .example {width: 95%; max-width: 300px}
Second, don't use media queries for everything. I removed all of you media queries in the code and this is what you should change;
.component {
width: 95%; max-width: 300px; background-color: hsl(0, 0%, 100%); padding: 1em; border-radius: 20px; border: none; text-align: center; box-shadow: 0px 6px 20px 4px hsl(218, 39%, 81%); }
.qrcode { border-radius: 10px; margin-bottom: 1.25em; }
Just copy and paste the code that I edited and removed all of the media queries that you have and your solution should be all good now.
Marked as helpful1@noormuhammadrazaPosted 5 months ago@geomydas thank you for your valuable suggestions. I will surely try include them in my work.
0 - @nainsworthPosted 5 months ago
HTML and CSS are clean and well-structured. Great job on including CSS resets and media queries. The only thing I would suggest is organizing CSS a little differently by having the .qrcode, h1, and p styling above the media queries. Otherwise, great job, and keep up the great work!!!
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