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

Qr Card using flex-box

@MouhibMoughtanim

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


Hey , My name is Mouhib Moughtanim, i'm a beginner and i would like to learn more about creating websites , so when searching about the best methods to learn i've found that practicing is that method and the best place to do that is with you guys at frontend mentor , but i've found hard is how to choose the measures for padding and margins and the types to us(em,rem,..) , and this case i was charged to center the card inside of this layout , so i've tried to use flex-box i dont know if there is better solution than that... so i'm down to get any advice to improve my skills thanks.

Community feedback

Jason 👾 160

@super-gill

Posted

i basically use rem for everything, but especially fonts, because unlike pixels rem and em scale, rem to the root element and em to the parent element. When i start though i will usually lay things out using pixels and then convert them in refactoring. 1rem/em = 16pixels.

I used flexbox for this project too, its really easy to position things center page with it but you still have all the extra tools that flexbox gives you, if you havent seen it yet look at this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ its basically how i learned to use flexbox.

I dont have the original measurements either for the challenges so i just go by what looks roughly correct, I've been using how the text looks compared to the original to determine how close i am. Looking at yours, if you wanted it closer i think all you would have to do is reduce the width a bit, if the image spills out of the container set its width to 100% instead of 350 px so it just fills the parent.

Marked as helpful

1

@MouhibMoughtanim

Posted

@super-gill Thank you a lot for your help I appreciate it

1
Robin 160

@roleigh1

Posted

like it

1

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