Social proof section - HTML and CSS
Design comparison
Solution retrospective
As always, I encountered many difficulties trying to make the page responsive. What are the best practises regarding media queries ? Is it better to place them under the class they're attached to or put everything in one big media query ?
Community feedback
- @itushPosted over 1 year ago
Congratulations on completing the challenge! 🎉
📱 Start with mobile-first approach: Design and implement styles for smaller screens first, and then progressively enhance for larger screens.
🖥️ Use breakpoints: Define breakpoints at specific screen widths where the layout or design needs to change. This helps to ensure a smooth transition between different screen sizes.
📐 Keep it modular: Organize your CSS code into reusable and modular components to maintain a scalable and maintainable code-base.
💡 Use min-width for media queries: By using min-width, you can target specific screen sizes and up, allowing your styles to be applied to larger screens while still maintaining the smaller screen styles.
⚡ Optimize performance: Optimize your media queries to minimize unnecessary CSS code and reduce file sizes for faster loading times.
Remember, these are just some general best practices, and the specific implementation of media queries may vary depending on your project requirements and design goals.
-
I prefer to start with mobile-first approach and define all the media queries at the end for larger break points.You may checkout 12 important CSS topics where I discuss about Media Queries, Mobile-First Workflow etc. in a simple way.
-
Using section and article elements was a better choice. Try to use at least one main element for a page and avoid divs as much as possible.
Once again you have done a wonderful job.🚀
Hope this helps.
Keep at it...💻 Happy hacking!
1@ClemenceTafforeauPosted over 1 year agoThank you very much for your feedback! 🙏 @itush
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