@MichaHuhn
Posted
Good work!
You used display: flex;
and align-items: center;
correctly to position the author name.
When using display: flex;
(or display: grid;
), it's possible to use the gap
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.
Marked as helpful