Mobile-First Solution using css flexbox
Solution retrospective
Towards the end when I had everything laid out properly and I was playing with the font properties, I realized I could never get it just right. Even using the provided font size that I was supposed to use. Is this expected that you cannot get the exact words on each line with the right size?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ughvop
You can fix it by padding- right & padding-left in the text, also you're not using the font-family Outfit
- @peanutbutterjlly
hey 👋,
yea, it can be a little tricky getting the solutions 100%, especially if you don't have the figma files.
One thing I noticed is that your font-family looks different than the design, and that you set your font-size in pixels. That's usually frowned upon because if someone wanted to bump up the font sizes on their screen, that pixel value is 'locked in' - that's the reason it's usually better to go with REM's to change font-sizes.
Another think you might want to look at after you've played with font-sizes and line heights is the margins you have set on your p tags and in your div - the fonts will fit in its box but it depends on how much margins/padding you have as well.
Overall good job 👍 keep up the good work!
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