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

P
solvman 1,670

@solvman

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@tburette

Posted

On a very wide and small vertically viewport some of the content is clipped. This is due to :

@media (min-width: 985px) {
  body {
    height: 100vh;
  }
}

It really has to be an extreme aspect ratio to happen.

Like last time, there are several things that I liked in your solution compared to mine :

  • I like the use of figure + figcaption. I didn't think of it.
  • I completely skipped the background pattern. It really adds that 👌.
  • I noted the grid-column: 1 / -1; to make an item span all the columns not matter their number. Smart.

Marked as helpful

2

P
solvman 1,670

@solvman

Posted

@tburette, thank you for your comments!

Good catch on that clipping issue! 😁 I'm using height: 100vh; to center content of <main> vertically. What would be a good solution to address the issue without affecting vertical alignment?

0
P
solvman 1,670

@solvman

Posted

@tburette

fixed it by adding

@media (min-width: 985px) {
  body {
    height: 100vh;
    min-height: 600px;
  }
}
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