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

html & css flex

#bootstrap

@bdarab

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Here it is. It took 5 hrs. The main challenge was to decide which technic to use. Grid or flex. Looking forward to your feed back.

Community feedback

zdenman 140

@zdenman

Posted

Hello, in my humble opinion you seems to over-complicated this solution with bootstrap. simple .container with 3 divs inside it and giving .container display:flex; you shuould have 3 divs inline with fewer lines of code. Just my two cents, am still learning too :)

Marked as helpful

0
P

@Miculino

Posted

Hey @bdarab

Congrats on completing the challenge! It looks nice overall, I'd say. I have a few suggestions for you that I hope will be useful:

  • The container should be vertically centered as well

  • There shouldn't be any box shadow on the container

  • Add more padding around the content inside the cards

  • Change background color according to the one in the original design

  • Icons dimensions are different. Currently, they look a bit stretched and disproportionate

  • For the .card-text, you can use the text from the original design

  • Responsive design needs some adjustments. On mobile screen sizes, the container isn't centered. It stays more on the right side. You should also go from 3 horizontal columns to 3 vertically stacked columns. On tablet resolution, you have two columns on one line and the third column is underneath them.

Hope this helps. Keep up the good work!

1

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