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

Responsivness with drid

Martinβ€’ 240

@TheMrBombastic

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

Lucas πŸ‘Ύβ€’ 104,420

@correlucas

Posted

πŸ‘Ύ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 grid and flex if you want to check it to see the structure, I'll let you the link

https://www.frontendmentor.io/solutions/4-card-feature-section-vanilla-css-custom-design-glassmorphism-35MDUfOBdt

πŸ‘‹ I hope this helps you and happy coding!

1
Martinβ€’ 240

@TheMrBombastic

Posted

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
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