Submitted almost 3 years ago

3-column preview card solution | scss, grid

Gutka• 65

@karbowskam

Preview site View code

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I'm on fire! (I think? :D) But seriously - I hope the effect is quite good :)

Community feedback

Abhijit Barman• 550

@abhijitbcob

Posted almost 3 years ago

looking very nice! Here is my some tips:

to center any element in body just only use display: grid; place-items: center;
instead of writing row height, use padding inside every card component.
in mobile view write grid-template-columns: minmax(0, 325px) so that the card be responsive.

Marked as helpful

Gutka• 65

@karbowskam

Posted almost 3 years ago

@abhijitbcob thank you for your advices :)

ToNisamBioJa• 330

@ToNisamBioJa

Posted almost 3 years ago

You indeed are on fire!

One small thing is that you forgot to put border radius on your boxes.

Good work here. Keep it up and happy codding!

Marked as helpful

Gutka• 65

@karbowskam

Posted almost 3 years ago

@ToNisamBioJa Oh yeah, border radius. I forgot about it completely. I'm going to fix it. Thank you so much for your feedback :)

Please log in to post a comment

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