Design comparison
Solution retrospective
Getting a bit easier, would love feedback on how to improve code. Thanks!
Community feedback
- @bccpadgePosted about 1 year ago
Hello @jclegg31. Congratulations on completing this challenge!!!π
Your solution looks really good and I have few tips you might be interested in to improve your solution.
- On smaller devices your component is cut off due to
height:100vh;
and to fix the issue you can domin-height: 100vh;
on thebody
- Also you can add spacing using
padding
andmargin
Updated code below
body { font-size: 16px; /* height: 100vh;*/ max-width: 375px; display: grid; align-content: center; margin: 0 auto; background-color: var(--clr-lightgray); min-height: 100vh; padding: 1rem 0; margin: 0 1rem; }
HTML π:
- I see that you wrapping everything in
div
which isn't good for accessibility. Adiv
doesn't have any semantic meaning.
More infoπ:
CSS π¨:
- Font size shouldn't be in pixels because pixels are absolute unit and doesn't scale when users want to change their font size in their web browser setting.
More infoπ:
Here is my solution to this challenge Single price grid component using Tailwind CSS
Hope you find this useful and don't hesitate to reach out to me if you have any questions
Marked as helpful1@jclegg31Posted about 1 year ago@bccpadge Thanks for the feedback! I made some adjustments, but couldn't quite see the difference in the small screens (only looking on my phone). It still ran over but I was able to scroll to see the rest of the content which I guess is not ideal?
Let me ask you...for the font size. Is it not ok to put it as a base level font in the body in px? Then use rem stemming from that? Or maybe that pixel based font size should go in the :root? I was wondering if it needed to be somewhere to reference from.
I need to look into tailwind. That's on my list.
Thank you for the help!
0@bccpadgePosted about 1 year ago@jclegg31
I use an IPhone SE and component needs space on the left and right side.
You can put the base level font size on the
body
just make sure it is in rem units.16px = 1rem
When I build projects, I do this
html { font-size:100%; }
Marked as helpful1 - On smaller devices your component is cut off due to
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