Submitted almost 3 years ago
Single Price Grid Component w/HTML&CSS, Flexbox, BEM
@95Fredo
Design comparison
SolutionDesign
Solution retrospective
My body is ready. Criticize my code Devs.
Community feedback
- @grace-snowPosted almost 3 years ago
Hi
This looks a bit broken on my phone. Here are some suggestions of improvements
- never use
width: 100vw;
. Viewport units don’t account for scrollbars or device notches so you’re actually introducing horizontal scroll with that. Body and block elements are 100% wide anyway, so no need - remove the height 100vh too. Min-height instead allows it to grow if needed (you shouldn’t need it on body html and container though - only add css properties where you actually need them, see what you can remove)
- put the price in a paragraph tag
- use a list element for the list in the last box
- the sign up should be an anchor tag as it would trigger navigation (unless you’re expecting it to do something else?)
- this is an ideal css grid practice challenge so a bit of a shame to be using flexbox. Consider having another go with grid instead
- remove height and width from the card. You don’t need either, just a max-width as base and in the media query. Let things be the height they need to be
- overall I’m not sure you’re understanding heights fully in this, I can see % heights where none are needed…. css grid will help with that part of this layout as you can define all sizes in the grid template, not on the child elements.
I hope this helps
Marked as helpful2 - never use
Please log in to post a comment
Log in with GitHubJoin 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