Skip to content
Submitted about 4 years ago

a simple price grid component with HTML & CSS grid

Lakshan•305
@M-lakshan
A solution to the Single price grid component challenge
Preview (opens in new tab)Code (opens in new tab)

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~

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Agata Liberska•4,075
    @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