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

mobile first using CSS FLEX BOX

Senay 150

@Senay-Fekadu2

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I had a problem on the div container on the testimony part they wouldn't be equal so I had to give it min-height and min-max height but it hides the content when the view port width decreases. 2 was it a good idea to use Position property ? so as to give it the steps look

Community feedback

darryncodes 6,390

@darryncodes

Posted

Hi Senay,

Great effort - looks pretty close to the design!

  • i've found fixed height plays havoc with responsive design, i don't think you need it, just bring in your media query in sooner. max-width would be sufficient
  • i'd opt for transform: translateY(2rem); instead of position
  • you could use a <main> on your <div class="container"> this will clear up your accessibility report, semantic html is really important too

Good luck and keep coding!

Marked as helpful

0

Senay 150

@Senay-Fekadu2

Posted

@darryncodes thanks bro it means a lot and I've learned a lot in these challenge I've used margin instead of positioning it was better than positioning but it is not responsive enough and it lost its structure on the way . but as you say I will check out transform property and also I need to know more about the semantic html because am not comfortable with it yet that is why I am avoiding it but if it is the way to go then am going in

0
Senay 150

@Senay-Fekadu2

Posted

@darryncodes but about the max-height and min height what should I have done If I let it be responsive the three container have different content and they won't sync up one would be shorter at times and other time equal size

0
darryncodes 6,390

@darryncodes

Posted

good to hear you've learnt a lot @Senay-Fekadu2. Yeah margin will get messy too, makes you work harder responsively.

In answer to your second question you've already done it. Setting users-testimony row to display: flex; and .col to flex: 1;. flex: 1; is shorthand for flex grow/shrink/basis and it's performing all the magic.

Marked as helpful

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