@Fahatmah
Posted
Hello Kegan! 👋
To answer you first question, you can try flexbox when the screen is in the desktop size, you see in the designs the first three elements which are the img, h2, and p, you can set the alignment to flex-start or you can just set the a to flex-end
This is what I mean:
.card {
display: flex;
flex-direction: column;
}
.card a {
align-self: flex-end;
}
If the .card a won't work, just add justify-self: flex-end;
Hope that works. 😁
@KeganF
Posted
@Fahatmah Thanks for your feedback!
Using flexbox, I was able to find a way to recreate the same spacing as .button { margin-top: 4rem; }.
After some experimenting, here's what ended up working:
/*
Setting a specified height for the card creates
more room for the content to be spaced out
*/
.card {
height: 450px;
display: flex;
flex-direction: column;
}
/*
Turning on flex-grow for the paragraph above the button
allows it to fill the extra space within the card
*/
.card > p {
flex-grow: 1;
}
The reason I left out align-self: flex-end is because align-self uses the cross axis for positioning. Because .card is using flex-direction: column, the cross axis is horizontal and positioning an element with align-self: flex-end (in this case) will align it with the right edge of the container.
The reason I left out justify-self: flex-end is because the justify-self property is not used in flexbox, which I read about here.
There's still more learning I have to do before I'm more confident with all the in-depth details of flexbox, so if I've missed anything please do let me know!
Cheers! 😊
@Fahatmah
Posted
@KeganF Thank you for the article! Cheers too!
