Four Card with CSS Flexbox and Sass

Hi WarBaddy,

I can't see your code but your HTML structure and use of Flexbox is very similar to my solution. I styled for the mobile layout first and then tweaked the flex layout for the desktop, basically just had to change the direction from column to row and set the width on the two outside cards and the middle wrapper to 30%, with the card widths all set to 22rem or so; this allowed things to shrink and grow fairly smoothly.

Hope that helps.

Great work @warbaddy. Desktop version, it's perfect. It would be great if you make it responsive. When it goes mobile please add this code to boxes div. flex-direction: column; Hope it helps. Happy coding :)

Hi, @WarBaddy ~ I have studied your work, and it's great on desktop. Here are some of my opinions ~

1. Font sizes are too small compared to design.

2. You used flex for this situation, but I hope you to try using grid. I think that would be easier to implement such cases.

3. Also when screen becomes smaller, only card on left and right are getting smaller and this is not good. All 4 cards must have same width always. I think using grid can solve this issue.

Hope my words can help you even a bit. Happy coding ~ ✨