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 4-Card Feature Section w/ Grid

@wdelanoy

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


  • Expanded my use of custom properties. Assigned properties for colors, font weight, and font sizes. This also allowed me to redefine the font size custom properties inside of the media query. Changed the naming convention to something a little more generic so that if I wanted to completely change the color, I could do so without making things confusing

  • Used Flexbox on the mobile sizing and switched to Grid inside of the media query. Used the grid-row and grid-column attributes to assign placement inside of the grid

  • Finally begin to understand that there are 3 levels to each grid, and different properties to manipulate each one - container, items, and content

Community feedback

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