Submitted 6 months ago

Blog-preview-card

Justin•100

@aduatgit

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

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•3,130
@Alex-Archer-IPosted 6 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 the body tag to center all the content without margins. And you can use gap to create space between card's content - it's a bit easier.

Overall, you work is really accurate and neat =) Cool, happy coding =)
Marked as helpful
1
Alex•3,130
@Alex-Archer-IPosted 6 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's display to block to fix your issue.

But you can still get rid of containers, they aren't really necessary =)
0
Justin•100
@aduatgitPosted 6 months ago
@Alex-Archer-I

Thank you very much for the feedback, that was really helpful and explained my problem quite well :)
1
Alex•3,130
@Alex-Archer-IPosted 6 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

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