Product Preview Card using CSS Grid

Solution retrospective
I'm really having troubles with the media queries. Please any suggestions on how make this project responsive on the mobile?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @zofia-mm
I'm no expert, but I've managed to make my media queries work. If you want to take a closer look - check out my solution to this very challenge! And if you have any specific question - hmu, will do my best to answer.
But here's a quick example:
@media only screen and ( max-width: 500px ) { /* mobile */ .main-column { flex-direction: column; margin-left: 15px; margin-right: 15px; } } @media only screen and ( min-width: 501px ) { /* desktop */ .main-column { flex-direction: row; width: 22rem; } } .main-column { /* things like background color and styling */ }
P.S. I felt really insprired by the way you've organized your css file.
P.P.S. Great job with the design! ;)
Marked as helpful - @Deolabest
Thanks for your contribution
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