Design comparison
Solution retrospective
I think I've done a pretty good job for this challenge, but do let me know if there are ways to improve.
Community feedback
- @grace-snowPosted over 3 years ago
Hello
You need to change the heading levels on this and get the sizes closer to the design
Looking at the css, you should remove all position absolute and transforms I think. These aren’t good approaches for this layout and are making everything unnecessarily complicated for you.
There’s a lot of repeating css in this. Remember elements can have multiple classes, so the shared styles on cards can be handled by one class.
I also don’t understand what’s going on with the media queries in this tbh. It’s highly unusual to have min and max width media queries in use like this. It’s like you’re overwriting your own styles in places…. Best practice is to have mobile styles as the base, then add min width media queries as needed for larger and larger screens in order.
Marked as helpful0@TSPraneethPosted over 3 years ago@grace-snow I've used position and transform only to get the elements to the center of the screen in larger screens, is it a better option to give width and use margin auto to place it to the center? And I'll look into the other ways to improve too.. thank you
0@grace-snowPosted over 3 years agoIt would always be better to use max-width on child and either grid or flexbox properties on the parent to center
0 - @MojtabaMosaviPosted over 3 years ago
Hi, the mobile and desktop view look quite good, between 700px up to 1000px you've got some horisontel scrolling. There are two solutions in my opinion:
1- Having the mobile styles up to 1000px and then switching to desktop styles.
2- Restyling by defining another media query, which I don't recomand because it's not good practice.
Keep coding :)
Marked as helpful0@TSPraneethPosted over 3 years ago@MojtabaMosavi thank you, I'll look into that
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