Submitted almost 5 years ago

Mobile first using Sass, with a modular css aproach

@psiqueiros

A solution to the Four card feature section challenge

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?

Code

Please log in to post a comment

Community feedback

Pranshu Dobhal•295
@pranshudobhal
Posted almost 5 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. :)

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