Mobile first using Sass, with a modular css aproach
Design comparison
Solution retrospective
The easiest way i thought of for acomplishing the desktop layout was to nest 2 of the cards in a div and use flex aling-items. The problem is that this aproach made it hard to create the intermediate break point I wanted, which was a 2 column layout. I think i could have acomplished that with grid... Any sugestions?
Community feedback
- @pranshudobhalPosted about 4 years ago
Hey! The way I implemented this design was that I used bootstrap and flexbox. So, I created 3 columns, in the 1st one there was 1 card, in the 2nd there were 2 cards and in the last column, there was 1 card. In the first and last column, I gave the cards a property of align-self-center, so that did the job for me. And I gave the columns property of .col-md-4, so below medium devices, it would take up the whole space, and this way I was able to achieve mobile responsiveness as well.
And you can achieve the same with the grid as well, you will just have to visualize the start and end of the cards and make a grid accordingly.
Hope this helps! Let me know if you need anything else. :)
2@psiqueirosPosted about 4 years ago@pranshudobhal It does help. Actually i have never used a bootstrap, I think Scrimba has a course on it, so i'll check that out.
Thanks!
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