Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

a simple price grid component with HTML & CSS grid

Lakshan 305

@M-lakshan

Desktop design screenshot for the Single price grid component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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~

Community feedback

@AgataLiberska

Posted

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 :)

0

Lakshan 305

@M-lakshan

Posted

@AgataLiberska Ahaa.. I asked that how can we use both height and width sizes in a med.querie ( like #@media_screen_and_(min-width: 375px)and(min-height:800px){ } , but I only used width property for this built. whenever I used both the page is not responsive. ). Thanks Agata 💪🏼🙂🥂, I'll do the flex alignment in my next preparation. btw another thing, >> according to my question I saw a thing in a media querie tutorial that if we used 'em' sizes instead of 'px', 'pt' sizes we can transform our scale (ems automatically converts to pixels) to any resolution with the help of given pixel ratio. Is it possible? I haven't done that yet. As I remember the tutorial is from the YouTuber CODER CODER but I'm not sure it is for media queries or for something else...

0

Please log in to post a comment

Log in with GitHub
Discord logo

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