Design comparison
Solution retrospective
I had a lot of trouble with this one and had to resort to looking at other solutions before I could make something presentable. I struggle heavily with css-grid.
How do you align the reviews and cards like in the picture? And make it responsive?
Ty in advance.
Community feedback
- @solvmanPosted 9 months ago
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 helpful1@JanAbePosted 9 months ago@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.
1@solvmanPosted 9 months ago@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 containerMarked as helpful1
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