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 - Layout

@Joy-FrontEnd

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


Struggled with it a little bit, not quite responsive. Would appreciate feedback, thank you in advance. ☺☺

Community feedback

@adluders

Posted

One thing I'd suggest to help with the responsiveness, is to not use a px based width for each card. Maybe try using percentage based, specially when it starts getting to mobile, that way each card can be flexible and adjust based on the viewport width. Also, maybe remove the grid-template-columns property on tablet sizes and below because then all the cards would be aligned in the middle of the page. Hopefully those tips helped! Great work!

1

@Joy-FrontEnd

Posted

@adluders Thank you so much, appreciated. Will play around with it and get it to be responsive.

1

@adluders

Posted

@Joy-FrontEnd glad I could help. Let me know how it turns out.

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