Social proof section HTML & CSS FlexBox Solution

Community feedback

• 

  Anna Leigh•5,135

  @brasspetalsPosted about 4 years ago

  Hi, Antonio! Hopefully I can help with some of your questions. 😃

  If you remove height: 100vh from the body, your background images will display correctly.

  While this won’t fix everything, I worked with your code a bit and found some things that will help with general alignment:

  • Adding a padding to your section element. This will help the top and bottom sections line up better.
  • Removing height: 50vh from top and bottom divs will also help with responsiveness.
  • Removing all the margins from top-left, title, and description

  The testimonials are not responsive because you have given them a specific height and width. Using max-height or max-width would probably be better, but you may have to play around with the values. I also suggest changing the bottom to just the following:

  .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  

  To get the first testimonial to line up with the top, you will have to remove its margin-left.

  2
• 

  Dawid•440

  @dwddgszPosted about 4 years ago

  Hello

  At this (max-width:768px) you can try add margin:0 auto to .bottom .test. It should do the job. Keep up good work

  1