Design comparison
Solution retrospective
Everything went well. I managed to utilize flexbox quite well I think and didn't have much trouble at all getting the layout to work. I think I was too fixated on getting things pixel perfect, especially with the font sizes and line heights.
What challenges did you encounter, and how did you overcome them?I had some trouble with the author part at the bottom of the card, I was using flexbox. What worked in the end was wrapping every part (i.e. the image and the name) in a separate div, as well as wrapping these divs in one big flexbox div (i called it author in my project). By doing that I could simply position the author div and didnt have to worry about any margins or padding of the content affecting the layout.
What specific areas of your project would you like help with?The background of the small "Learning" tag below the image overlapped with the margin I put on said image. I didn't know how to fix it in a way that made the margins correct like in the figma file, so I bandaid fixed it by adding the amount of padding at the top of the "Learning" tag to the bottom margin of the image. Not too satisfied with that.
Community feedback
- @Alex-Archer-IPosted 5 months ago
Hi!
The problem you stumbled upon happened cos this 'learned' element is inside a container. Height of container is auto (which means the height of a text) and padding tends to falls outside of the parent element. So, margin of the picture moves only text but not the padding. (Phew... I really hope I explained it clearly)
Well, you can freely get rid of all those containers and style elements directly. That way paddings and margins will be more predictable (at least till you'll learn about 'margin collapsing' =)).
And by the way, you can use
flex
on thebody
tag to center all the content without margins. And you can usegap
to create space betweencard
's content - it's a bit easier.Overall, you work is really accurate and neat =) Cool, happy coding =)
Marked as helpful1@Alex-Archer-IPosted 5 months ago@Alex-Archer-I
Sorry, I took a closer look at your work and I should clarify that this thing with padding happened cos
span
is inline element. So, you can change it'sdisplay
toblock
to fix your issue.But you can still get rid of containers, they aren't really necessary =)
0@aduatgitPosted 5 months ago@Alex-Archer-I
Thank you very much for the feedback, that was really helpful and explained my problem quite well :)
1@Alex-Archer-IPosted 5 months ago@aduatgit
You're welcome =)
Good that I managed to write about this inline thing before you read, otherwise my comment would have quite less sense =)
Anyway, glad that I could help. Ask or comment if need =)
0
Please log in to post a comment
Log in with GitHubJoin 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