Social proof section HTML & CSS FlexBox Solution

Solution retrospective
I had trouble with background images, what's a better solution for them? I also noticed the testimonial cards are not responsive in production, I couldn't get them to automatically center with flexbox, any suggestions here?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @brasspetals
Hi, Antonio! Hopefully I can help with some of your questions. 😃
If you remove
height: 100vh
from thebody
, 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 yoursection
element. This will help the top and bottom sections line up better. - Removing
height: 50vh
fromtop
andbottom
divs will also help with responsiveness. - Removing all the margins from
top-left
,title
, anddescription
The testimonials are not responsive because you have given them a specific
height
andwidth
. Usingmax-height
ormax-width
would probably be better, but you may have to play around with the values. I also suggest changing thebottom
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
. - Adding a
- @dwddgsz
Hello
At this
(max-width:768px)
you can try addmargin:0 auto
to.bottom .test
. It should do the job. Keep up good work
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