Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Landing page made using css grid

JanAbe 230

@JanAbe

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

P
solvman 1,670

@solvman

Posted

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

1

JanAbe 230

@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.

1
P
solvman 1,670

@solvman

Posted

@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

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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