3-column preview card component using CSS Flexbox
Solution retrospective
Good day guys! This is my first challenge here on frontendmentor.
I'd like to ask for your opinions on my solution, especially using media queries, I know I used more than expected which is bad practice, I also want to know if there's a better approach to the challenge without using media queries. Thank you all!
Also, the text sizing and spacing gave me issues, together with the individual boxes' height and width
Please log in to post a comment
Log in with GitHubCommunity feedback
- @deeola
Good Job John, Clean design and really awesome effort.
About your question about Media Queries, what i would do is to start by wrapping my boxes in a container div(you can also use your main too like you did ). My next step would be designing at about 315px (Mobile-first), then add breakpoints at about 481px for tablets and 769px for desktops(and display the container div as flex at this point). So, instead on using max-width with your media-query, you are going to use the min-width property.
Overall, it's a very awesome design.
Welcome to the frontend community bossman.
- @grace-snow
This looks really good, although I'm a bit concerned about the way you've used viewport units... I expect the consequences could be unexpected on some screens but not sure.
The other thing I wasn't sure about is why padding is different on each side of the boxes. That doesn't look necessary
Overall, you could definitely have css about the third of the length it is.
For example, you shouldn't need to set height on anything, just some padding and max-widths on the boxes, vertical margin on the box content elements, and one media query to change the flex direction. That is really all that's needed here (plus colors, font sizes, focus and hover states).
I hope that helps
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