Hi @JanAbe,
I did it using Flex. I made a small example for you:
<div class="wrapper">
<div class="box red"></div>
<div class="box blue"></div>
<div class="box orange"></div>
</div>
With the following styles applied:
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.orange {
background-color: orange;
}
.wrapper {
border: 1px solid red;
display: flex;
flex-direction: column;
gap: 2rem;
}
.box {
width: 75%;
height: 150px;
}
.wrapper div:nth-child(1) {
align-self: flex-start;
}
.wrapper div:nth-child(2) {
align-self: center;
}
.wrapper div:nth-child(3) {
align-self: flex-end;
}
There is a link to the code pen solution if you want to check it out: Flex container. Also, feel free to check how I did it in my project: My Solution
Otherwise, it is an exceptionally well-done project!🎉 Congratulation! 👏 I hope you find my comments useful 🫶
Marked as helpful
@JanAbe
Posted
@solvman
Ty so much for your time. I think I understand it now! The width of 75% is also important which I didn't use.
@JanAbe
Yes, that 70% ensures that all three are the same size.
It is similar to the Grid; I must use justify-self
instead of align. I played around with it. If you are interested, you might want to check out Grid container
Marked as helpful