Design comparison
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
- @super-gillPosted almost 2 years ago
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 helpful1@MouhibMoughtanimPosted almost 2 years ago@super-gill Thank you a lot for your help I appreciate it
1
Please log in to post a comment
Log in with GitHub
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