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

Social Proof Section with CSS Grid and Flexbox

@maadcode

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


Hey! I will greatly appreciate your feedback. I tried to find the best option to make it responsive but I feel that it can be improved.

Community feedback

P
Grace 27,350

@grace-snow

Posted

Hi Manuel,

On my desktop, the three cards at the bottom are flowing onto two rows. This is because of exact widths on those cards. It would be more responsive if you used flex properties like flex-grow -shrink and basis, something like flex: 1 1 33%;. I also notice you are using grid but not defining the grid fully. Grid-template areas cannot replace the columns and rows altogether...

In the HTML there are a few changes I'd recommend. Like

  • swapping h2 for a h1
  • placing title-star in a semantic html element like a paragraph tag
  • Maybe adding a visually hidden heading before the reviews. It just reads a bit strange with a screenreader jumping from the ratings to "Image, colton". Look up .sr-only for examples of how to add this type of hidden h2.

Back to layout... Here are all the things I just changed in devtools that makes it much more responsive. Have a look at either adding this as an extra stylesheet temporarily in devtools and inspecting the elements one by one, resizing the viewport often. Alternatively, try applying these changes one by one in the browser devtools to see if it builds your understanding of different ways to acheive the layout. I like to do these things with devtools open on the side so it's easy to resize the viewport a lot:

@media screen and (min-width: 720px) {
  .card {
    /* width: 330px; */
    /* margin: 2rem auto; */
    margin: 2rem auto 0;
    flex: 0 1 33%;
  }
  .reviews {
    /* flex-wrap: wrap; */
    gap: 1rem;
  }
  .header > div:first-child {
    /* padding: 0 3rem; */
    padding: 0 3rem 0 0;
  }
  .title {
    /* font-size: 36px; */
    font-size: 3rem;
  }
  .card-2 {
    /* margin-top: 4rem; */
  }
  .card-3 {
    /* margin-top: 6rem; */
  }
  .header {
    align-items: center;
  }
}

.name {
  margin: auto 0 0 0;
}

.card {
  /* padding: 2.5em; */
  /* grid-template-areas: "img name name name" "img graduate graduate graduate" "comment comment comment comment"; */
  padding: 1.5rem;
  grid-template-areas: "img name" "img graduate" "comment comment";
  grid-template-columns: minmax(20px, 60px) auto;
  gap: 0.5rem 0.8rem;
}

.profile-img {
  width: 100%;
}

.graduate {
  margin: 0 0 auto;
}

.comment {
  line-height: 2;
}

.reviews {
  /* align-items: center; */
  /* margin-top: 4em; */
  align-items: flex-start;
  margin: 5% auto 0;
}

.title {
  line-height: 1.2;
}

@media screen and (min-width: 1000px) {
  .header > div:last-child {
    padding-right: 0;
  }
  .reviews {
    /* margin: 0; */
  }
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container {
  /* margin: auto; */
  /* width: 90%; */
  margin: 1rem;
  max-width: 1200px;
}

.header > div {
  /* width: 100%; */
  flex: 1 1 50%;
}

.header {
  /* align-items: center; */
  /* padding-top: 5%; */
  margin: 0 auto 5%;
  justify-content: space-between;
}

html {
  /* line-height: 1.15; */
  line-height: 1.5;
}

.card:first-of-type {
  margin-top: 0;
}

.card.card-3:last-of-type {
  margin-top: 4rem;
}

I hope this is helpful and gives you some ideas. Overall it's a nicely delivered semantic project, just needs a little more tweaking 🙂

2

@maadcode

Posted

Thanks @grace-snow

Wow! I will apply your suggestions. It definitely looks much better with your changes.

Thanks so much!

0

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