Submitted almost 2 years ago

Grid / Flex / Media Query excercise

Daniel Dekany•920

@dknyd

Preview site View code

This is a solution for...Single price grid component

HTML
CSS

1newbie

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
@arkaroy135Posted almost 2 years ago
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

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