search

TerraTina / distributed-cards

Use Flexbox in a column direction to create distributed cards.
0 stars 0 forks source link

Image alignment #1

Open TerraTina opened 2 years ago

TerraTina commented 2 years ago

@wendywarren

I am having an issue with aligning the images properly and I'm not too sure how to go about doing that. Markbot also wants my website to be more visually similar and while I see that the padding/margins are different, I'm not sure if it would be worth the time fiddling with that instead of moving on to this week's assignment. Would it be possible for me to just fix the issue with my imgs and consider it done?

wendywarren commented 2 years ago

Hi @TerraTina,

The issue was applying that the space between each element within the card was causing the difference before the image so it was off.

Because we wanted the buttons at the bottom to lineup (regardless of how many lines the <p> were) we had to apply margin: 0 0 auto; on the <p>. By doing so it actually makes the flex property of justify content irrelevant because all extra space is going to be applied to the space under the <p>.

To put space back between the other elements, I applied margin-bottom: 1.5rem; to the <h2>, <img> and margin-top: 1.5rem; to the <a>.

Let me know if you have any questions about what I've done.

I will manually mark the assignment as complete because overall you met the requirements already. Good job!

Thanks, Wendy