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

Card Feature Page - Made Responsive Using Grid

P
Will 310

@wansmth

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


What are you most proud of, and what would you do differently next time?

I finished this project with relative ease. I am happy that I was able to recognise to use grid immediately, whilst being able to consider why flexbox might not be an ideal approach.

What challenges did you encounter, and how did you overcome them?

I first used a 3x2 grid and was confused as to how I could centre the two outer cards vertically. I overcame this by realising that I should divide the rows further - this way I could target the block start and end to be in the middle of the two inner cards.

What specific areas of your project would you like help with?

My solution always has a vertical scroll-bar. I would appreciate it if someone could give me an overview of roughly how they would go about eliminating this where possible.

Community feedback

P
Alex 350

@Sharky83

Posted

Their solutions dont have the included footer in. (your name)

remove this, and it should then allow you to have a max-height of 100vh if needed.

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