Design comparison
Solution retrospective
I am proud that i wrote whole code with my own head , without seeking any code online. I will next make a plain on paper before starting a project
What challenges did you encounter, and how did you overcome them?Well, in the footer it was hard for me to align text with the author image, i researched somethings online and i overcome this issue.
What specific areas of your project would you like help with?I want people to tell me more about position elements within elements
Community feedback
- @MichaHuhnPosted 4 months ago
Good work!
You used
display: flex;
andalign-items: center;
correctly to position the author name. When usingdisplay: flex;
(ordisplay: grid;
), it's possible to use thegap
property to create a gap between each element inside a flex container.E.g.
display: flex; align-items: center; gap: 0.75rem;
The padding on the author name can be omitted with this approach.
The image corners are a bit squashed. It can be fixed in the following way:
- Wrap the card with a dedicated HTML element like
<div class="blog-preview-card">
or<article class="blog-preview-card">
- Apply padding to this card component
- Remove the padding from the image
I hope that's a bit useful.
0 - Wrap the card with a dedicated HTML element like
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