Responsive card using flexbox and media query

Please log in to post a comment
Log in with GitHubCommunity feedback
- P@Vinit1234
Awesome work @chrislara01 !! Your page looks cool! I would like to mention a few suggestions that might improve the accuracy of your solution closer to design as follows:
- Update the color of product__title to hsl(212, 21%, 14%); i.e.,var(--clr-black).
- Update the background of product-card__add-cart on hover as:
.product-card__add-cart:hover{ background-color: var(--clr-green-700); }
-
Using <figure class="product-image"> tag instead if <div class="product-image"> will improve the semantics of your page.
-
I like the trick that you used
display:none
to hide respective product images on respective screen sizes. But eventually you'll end up writing multiple media queries if there were a few more images (with different resolutions). You can try using srcset and sizes attributes in the <img> tag. You can Refer This
Rest of your work is Great! Keep Coding Keep Growing!!💪🏻
PS: If you found anything in this comment helpful, please remember to click the "mark as helpful" button. Thank you!
Marked as helpful - @P-Peeradon
Overall designs are ok, both in terms of text, color and box sizing model. You use @font-face to define your own fonts imported from the Internet so the system can interpret easily.
Join 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