
Design comparison
SolutionDesign
Solution retrospective
Not perfect or the most elegant but I think I figured it out. Tried doing this with not grids and that was not going to happen so I used a display: grid; (not a flexgrid). Fiddly on the positioning.
I never did get the "per month" to center align vertically. /* update */ Applied the feedback I had received (Big Thanks!) and corrected some issues.
- Dropped unnecessary Div's
- Changed how I switched sizing and padding based on screen size. Mobile looks right I think.
- Got the Pricing line to vertically align
- Changed the Why Us list to a UL/LI
- General clean up
- Did not change to BEM naming convention but am looking at how it works
Community feedback
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