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

Grid / Flex / Media Query excercise

@dknyd

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


Hi Lovely people!

I have finished this project, I think it turned out pretty nicely, I would only have 2 question which I would be grateful for answering:

1.) At approx 1050 px width, the list items of <ul> overflow the right bottom container (as soon as it gets less than 800 px it is fine as the media query for mobile view kicks in but 1050-800px widht looks like crap for some reason) If I try overflow, all I can do is either hide the list elements overflowing or make a scroll bar.

2.) How accurate is my solution? Should it be pixel perfect? I am not aware of the necessary level of similarity between design and result.

Also any general opinion is much appreciated.

Have a great day y'all

Daniel

Community feedback

Roy 600

@arkaroy135

Posted

Hello Daniel,

Hope you are doing well. I would like to suggest you to use rem unit instead of px on font size. You can check this for better understanding,

https://youtu.be/N5wpD9Ov_To?t=33

I don't know about the way you use grid, but you can check my code as reference. I think the way I used grid for the problem is much easier than yours.

Marked as helpful

1

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