Social Proof Section - SCSS / Flexbox

Hello Pon,

Your desktop design looks awesome, However, there are certain style properties for desktop that conflicts with the mobile appearance of your site. The following rules should help you with that :)

1- You should overwrite the margin property for '.main-section' class as follows

// this is located inside _midea.scss partial file
.main-section {
    gap: 4.9rem;
    margin: 11.8rem 0rem;   // <=========  This is the new line
  }

notice that to center the elements inside the main tag, we would set their widths using vw (viewport width) unit to achieve the wanted effect. (see below)

2- You should set the header tag to take all the available screen width, as follows:

// this is located inside _midea.scss partial file
.header-section {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3.9rem;
    width: 100vw;   // <=========  This is the new line
  }

3- You should add the following to your _midea.scss file, to set the width of the div (with a class review )

// this should be located inside _midea.scss partial file
.review {
width: 80vw;
}

4- You should change the padding for class 'rate', so that it doesn't overflow out of its container element.

// this is located inside _midea.scss partial file
.rate {
padding: 1.5rem 0rem 1.5rem 0rem;  // <=========  This is the updated padding style
}

5- You should set the width for the author div as follows:

// this is located inside _midea.scss partial file
.author {
    width: 90vw;  // <=========  This is the updated width style
    padding: 4rem 0rem 0rem 0rem;   // <=========  The padding should be updated as well
}

6- You can add some margin for author__container div element:

// this is located inside _midea.scss partial file
.author {
  &__container {
     margin-left: 3rem;   // <=========  The line should be added
  }
}

7- You should also add styles in _midea.scss for testimonial__text paragraph as follow:

// this is located inside _midea.scss partial file
.testimonial {
   &__text {                            // <=========  The line should be added
      padding: 0rem 3rem;   // <=========  The line should be added
   }                                         // <=========  The line should be added
}

This should fix mobile and tablet designs. Hope this helps :)

If you have any questions, don't hesitate to ask.

Have a nice day :)