Design comparison
Solution retrospective
I need help how to tackle the projection of responsive pages. Its looking difficult enough.
Community feedback
- @Fatma-TawfeekPosted 2 months ago
You've done a great job laying the foundation for a well-structured, responsive layout! Here are a few suggestions to make your CSS even better:
-
Headings Padding: Instead of padding-inline: 6rem; for headings, consider using margins or flexbox for better alignment across different screen sizes.
-
Font-size Scaling: Setting html { font-size: 62.5%; } is great for easier rem calculations, but overusing it in media queries (e.g., 50% on small screens) may cause text to become too small.
-
Responsive Design: Your media queries cover different screen widths, but setting body { max-height: 13.6rem; } in one query could squash your layout on smaller devices. It's better to adjust padding or layout proportions instead.
-
Grid Class: There’s a class called grid { gap: 1.5; }, but it seems incomplete. Ensure the unit (rem, px, etc.) is specified for the gap value.
-
Card Dimensions: Fixing card width and height might make it less flexible on smaller screens. Using relative units or setting max-width/min-width may improve responsiveness.
Marked as helpful0@AamnbabaPosted 2 months agoThank you @Fatma-Tawfeek, i will work on your advice to improve.
1 -
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