Social Proof Section Using CSS grid and Flexbox

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Omar, congratulations for your new solution!

  I saw that for many solutions you've an issue with the alignment, for these components the alignment will be ever the same, you'll need min-height: 100vh to make the body have the screen size of 100% of the screen height and use flexbox for the alignment, the properties for a body alignment will be like the example below:

  body {
  min-height: 100vh;
  display: flex;
  align-item: center;
  justify-content: center
  }
  

  Your code:

  body {
      min-height: 100vh;
      margin: 0;
      padding: 0;
      background-color: var(--white);
      background-image: url(/assets/bg-pattern-top-desktop.b28983fb.svg),url(/assets/bg-pattern-bottom-desktop.23fef4d3.svg);
      background-repeat: no-repeat;
      background-position: top left,bottom right;
      background-size: min(85%,450px),min(85%,450px);
      background-attachment: fixed;
      font-family: League Spartan,sans-serif;
      font-size: .9375rem;
      font-weight: var(--fw-m);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  

  For the paragraph of each card you can replace the p with <blockquote> thats the proper tag for quote text.

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0