a simple price grid component with HTML & CSS grid

Solution retrospective
My third build-up. 🙂 ... how set the media queries responsive for both mobile and pc resolutions using media queries (min-width: )/(max-width) with (min-height: )/(max-height) ? I used only one property [ only (min-width: ***px ) ] in med.q.s for this. How ever if I used both the page brakes. can we use transform:scale for this? ~Thankyou~
Please log in to post a comment
Log in with GitHubCommunity feedback
- @AgataLiberska
Hi @M-lakshan! Your solution looks fantastic at 1440px, but on my larger screen the card is not centered, and on a smaller screen, the right part of it is cut off (the content overflows the card and is hidden). Instead of hard-coding margins on the body, you can use flexbox or grid to center the card on the screen.
Not sure if I understand your question but in theory, you'd set `@media (min-width) and (min-height), although I don't think you need that in this case :)
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