Design comparison
SolutionDesign
Community feedback
- @RanitManikPosted 9 months ago
Unit Selection:
- Consider opting for rems (rem) instead of pixels (px) in properties like width, height, margin, padding, and font-size. Using rems provides better scalability and responsiveness, adapting to varying user preferences and device screen sizes. You can find more details in this article.
Illustrative Example:
/* Utilizing rem for enhanced scalability */ .container { width: 57.4375rem; /* Equivalent to 919px */ font-size: 1rem; /* Equivalent to 16px */ }
@media Query Enhancement:
- Your existing
@media query
focuses on centering content throughgrid
andplace-items
. However, there's an issue with the unit used formin-width
in thebody
selector. - Additionally, for improved responsiveness, consider replacing
width
withmax-width
for themain
section. - If
display: grid;
andplace-items: center;
are already in use for content centering, you can eliminate themin-width
andmargin
properties.
Refined Code:
@media (min-width: 375px) { body { min-height: 100vh; display: grid; place-items: center; } main { max-width: 350px; /* Opt for max-width for better responsiveness */ } }
These modifications aim to enhance your code's clarity, adaptability, and responsiveness.
I hope you find my feedback helpful. Please mark it as helpful if you do.
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