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

Responsive page using Flexbox and CSS Grid

Tobiasz 270

@tobiasz121

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


First try at the css grid. Open to all suggestions especially css grid and responsive design.

Community feedback

P

@Miculino

Posted

Hey @tobiasz121

Congrats on completing the challenge! You've done a nice job overall!

Here are my suggestions based on your final solution:

  • The background color used is a bit different - refer to original design

  • The box shadow of the cards has a different color. Also, consider reducing the amount of shadow

  • Use a similar color to the one in original design for the text

  • Increase line-height of p inside header

  • Your layout stays the same even on mobile screen sizes.

  • Use padding property instead of width on the container

  • Consider using grid-template-areas for building this layout and making it responsive using media queries https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

Hope this helps. Keep up the great work!

Marked as helpful

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