My approach was to create 3 divs which acted as columns on desktop, so that I could layout the cards in the way that they are supposed to be in the design
<section class="features">
<div class="column1"></div>
<div class="column2"></div>
<div class="column3"></div>
</section>
But I can't help but feel that there must but a different approach to this that would allow for more scalability in terms of number of cards.
It also limited the tablet layout, as I initially wanted to display 2 cards per row, but this column layout didn't allow for it. Would love to hear your suggestions on how to have all 4 cards in a single container and achieve the intended desktop layout.
@BikeInMan
Posted
I don't know if it helps, but check out this solution by @PhoenixDev22 (not me!). He did 2x2 card layout for tablet sizes.
https://www.frontendmentor.io/solutions/fourcardfeaturesection-html-and-css-g0spd5QE4
All the cards in a single div? May be possible with sizing and positioning, but I imagine chaos in coding. Its much simpler with flexbox or grid(my case, I did not do 2x2).
Good Luck.
Marked as helpful
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
