Design comparison
Community feedback
- @DebabrataBanikPosted 4 months ago
Your design looks great, but it seems you're not using media queries much. Instead of absolute dimensions, consider using relative values. For the .container__card element, use width: 90% and max-width: 24rem. For the buttons, set the width to 80% of the parent element instead of fixed values. Also, apply a different color for the hover state. This approach works, but there’s still room for further improvement.
Marked as helpful0@ivan-josefPosted 3 months ago@DebabrataBanik thank you very mutch, in my last challenge I managed to understand why relative lengths are better than absolute lengths
0@ivan-josefPosted 3 months ago@DebabrataBanik if i can ask one thing, why use max-width instead of just width
0@DebabrataBanikPosted 3 months ago@ivan-josef Width sets a fixed width, meaning the element will always maintain that exact width, which can cause issues on smaller screens when the viewport size decreases. Max-width, on the other hand, allows the element to take up to a certain maximum width, enabling it to shrink when the viewport size decreases, making the design more flexible and responsive. This also works the other way around, ensuring the element doesn't get too wide on larger screens.
Marked as helpful0
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