Design comparison
SolutionDesign
Solution retrospective
Had difficulties with mobile view. Will be glad if someone shows me proper solution.
Community feedback
- @Leo-ZubiriPosted over 2 years ago
Hi, nice solution. In my case applied grid to set equality between the image and contain. 1 fraction to each side (img and product details) .product_card{ background-color: white; max-width: 600px; min-height: 300px; ... display: grid; grid-template-columns: 1fr 1fr; }
So, responsively, it´s only one column and two rows with 1 fraction of the container @media screen and (max-width: 800px){ .product_card{ ... grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
Marked as helpful1
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