Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile-First Solution using css flexbox

@enderowner1

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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?

Community feedback

v 110

@ughvop

Posted

You can fix it by padding- right & padding-left in the text, also you're not using the font-family Outfit

0
Steve 1,170

@peanutbutterjlly

Posted

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!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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