Design comparison
Solution retrospective
I tried to make it more responsive by adding responsive margins to the boxes, but it didnt worked as i liked to, so i made them static again. Justify-content:space-around; should be the expression that i was loooking for, but it didnt work. Does it only work on flexbox? Does somebody know another way how to make the boxes in a way they change margins on the desktop version?
I might try with flexbox soon anways i think...
Community feedback
- @correlucasPosted over 2 years ago
👾Hello Martin, congratulations for your new solution!
I've checked your solution and its already responsive, also the media queries are working, if you note the mobile version the card boxes are flexible, so you did good. You build this solution entirely with flex but its kinda complicated to manage it.
I did mine with
gridandflexif you want to check it to see the structure, I'll let you the linkhttps://www.frontendmentor.io/solutions/4-card-feature-section-vanilla-css-custom-design-glassmorphism-35MDUfOBdt
👋 I hope this helps you and happy coding!
1 - @TheMrBombasticPosted over 2 years ago
Hi Lucas, thanks, and for your solution as well. But I think we did the same way: flex inside the card, and grid on the container. The resposivness on the middle screen depends on the taste, but i think for bigger screens it looks better when they spread a bit. I am working at an 28inch monitor, and when the carts are close together, i personally think it looks a bit, mhh maybe "cheap".
So I am still trying to do it with flex on the main container to get flexible spacings, maybe with margins linked to the viewportsize (vw), i still dont know how it might work.
0
Please log in to post a comment
Log in with GitHub
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