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

3 column card component

@AliTheCoder123

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback will be welcome

Community feedback

Shalom2935 420

@Shalom2935

Posted

Hey these are some advices :

  • There is no need to create two classes container and flex for the main element one will be enough.
  • After defining the width of .card, there is no need to give as well the width of his children instead add a flex property and set it at 1 so they will equally share the avaible space. Remove as well the height or set it to auto.

Marked as helpful

1

@AliTheCoder123

Posted

@Shalom2935 what flex property

if I remove container or flex it doesn't work

0
Shalom2935 420

@Shalom2935

Posted

@AliTheCoder123 That is surely because while removing it you didn't rewrite the properties you just deleted in the .container. flex property helps you define 3 properties: the flex-grow, flex-shrink and flex-basis. So when you set it at 1, what you're saying is that whether the container's width is increased or decreased, the children will always have the same width which is 1/3 of the parent's width.

Marked as helpful

1

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