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 made w/ CSS Grid and SCSS

#sass/scss
Kirsten βœ¨β€’ 460

@ofthewildfire

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


I did this challenge to learn more, and practice what I had read about CSS Grid

I had some difficulty with the alignment with the grid-items but I think I resolved them, and if there is a better way, any advice is appreciated.

Something I am a bit "iffy" about

  • The over scroll that is happening, I dont particularly like it and I suspect its due to height issues that I have created a compounding effect, but, I am not seeing it immediately, I will keep working on seeing where its coming from so I can reduce this, but, if anyone has any ideas or can nudge me in the right direction, I would appreciate that.

  • The entire size of the cards, but, I didn't want to use explicit height/width, so, I dont know, what should be done in a case like that.

Tiny change

  • The colors where pretty light, so I just changed them ever so slightly, its actually barely noticeable (this is the font color, the grey), but now it does pass the accessibility check.

Again, any advice or changes I should make that are more best practice, would 100% appreciate -- have a good day.

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