@bccpadge
Posted
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
paddingandmargin
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
divwhich isn't good for accessibility. Adivdoesn'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 helpful
@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!
@bccpadge
Posted
@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 helpful
