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

Social proof section using css grid

Basile Raiwetā€¢ 175

@BasileRaiwet

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


šŸ‘‹šŸ¼ Hi everyone,

I had to do some modification because properties like "fit-content" doesn't work properly with the frontend mentor screenshot.

Any recommendation is welcome :)

Enjoy your day and happy coding šŸ‘ØšŸ¼ā€šŸ’»šŸŽ‰

Community feedback

T
ApplePieGiraffeā€¢ 30,545

@ApplePieGiraffe

Posted

Hi, Basile Raiwet! šŸ‘‹

Good work on this challenge! šŸ‘ Your solution's nearly pixel-perfect for the desktop layout and it responds rather well! šŸ‘

One or two things I'd like to suggest are,

  • Making sure there's always a bit of space between the text and the bottom of the card for the testimonial cards (the text comes quite close to the bottom when the width of the screen decreases in the desktop layout).
  • Adding a max-width to the testimonial cards and horizontally centering them in the mobile layout so that they aren't too wide when the layout first changes from desktop to mobile.

Keep coding (and happy coding, too)! šŸ˜

1

Basile Raiwetā€¢ 175

@BasileRaiwet

Posted

@ApplePieGiraffe Thanks for your advice :)

About your first recommendation, It behaves like that because I had to set the height in pixel because the "fit-content" property doen't work with the screenshot feature (don't know why since this property is supported by every browser except IE)

Thank you for your comment.

Have a nice day

1
T
ApplePieGiraffeā€¢ 30,545

@ApplePieGiraffe

Posted

@BasileRaiwet

NP, Basile! šŸ™‚

Did you perhaps mean min-content? I believe the screenshots for the design comparison are taken in Firefox and I tried out using height: min-content in your solution in Firefox and it seems to work fine. šŸ‘ I often find that giving an element a variable height dependant on its content (rather than an explicit height) is easier to work with (and it should allow you to keep that space around the content of the card when the height changes).

0
Basile Raiwetā€¢ 175

@BasileRaiwet

Posted

@ApplePieGiraffe No, I mean fit-content šŸ˜… I often use this property in the same way you use min-content and it work on firefox and chrome but not here . Anyway, min-content seems to work in the same way in this use-case. šŸ™‚

0
T
ApplePieGiraffeā€¢ 30,545

@ApplePieGiraffe

Posted

@BasileRaiwet

šŸ‘

0
Lucas Piputtoā€¢ 305

@paiput

Posted

Wow, it's identical to the design. Awesome work!! Congrats!!

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