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

Four-Card-Feature-Section

@MuhammadM1998

Desktop design screenshot for the Four card feature section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


3 Attempts just to get the solution preview working! Had a bit of a problem getting the columns at equal size with flexbox, found this article and it turned out to be very helpful and i learned new things about when and why do we use flex: 1 or flex-basis: 100% and what's a better approach. Totally recomended. https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/ First time to to use BEM for HTML classes and it's really useful. Would appreciate any feedback.

Community feedback

@mahnoork18

Posted

This is pixel perfect layout! Good Job

1

@MuhammadM1998

Posted

@mahnoork18 Thanks! Glad you liked it

0

@UDsGitHub

Posted

Hi Muhammad, I just saw your site and it looks great. The only things I think you should add or change, are:

  1. The top padding of your site. Your page seems too close to the top of the screen.
  2. The middle two cards are not the same width as the outer two in the larger screen sizes. I think this might be due to the issue you were having with flexbox. I just noticed and felt inclined to point it out. Good luck! 👍
0

@MuhammadM1998

Posted

@UDsGitHub Yeah actually after I read the article I decieded to go with flex box as there's no padding so no problem, but it turned out that I do have to put padding and just left it there. Won't happen again hopefully, thanks for the feedback.

0

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