Design comparison
Solution retrospective
I tried my best to complete the challenge but failed miserably, but i successed half.I need constructive feedback,Please help anyone if you know. Successed in making cards and heading,desktop version failed in alligning cards and mobile version. anyone please help me if you know.
Community feedback
- @Sumner-DavidPosted over 4 years ago
Hey Akash, well done for getting that far. You got most of the stying in but i think your issue was more of setting up the base layout of the project. Even i have problems with that bit. Probably the hardest part for me is layout and planning for responsiveness
From my opinion, this project is best done using CSS grids on the card section since there are no defined rows or they intersect with each other.
Looks like you used Bootstrap for the card layout. Bootstrap is good for base layouts but for more complex ones consider things like flexbox and CSS grids, or even doing some magic with margin values. Careful with using bootstrap for everything too. Some people fall into a crutch of using it over learning more css.
I did this one yesterday. Try having a look at my code. It's a bit messy, but i managed to get what was needed with CSS grids.
Once you learn grids and flexbox, layouts get wayyy easier :)
https://www.frontendmentor.io/solutions/used-css-grids-for-desktop-and-tablet-then-flexbox-for-mobile-k2Vyj5wYf
1
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