Skip to content
Submitted 8 months ago

Four Card Feature Section

Kaushal Kishore•150
@KaushalSonic
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I think I got the layout design for this challenge.

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

I encountered a huddle of making the card section layout, then after a little bit of playing around with position property, I got this.

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

I would to take suggestion from pro members to take a glance of my challenge and give some feedback, thanks.

Community feedback

  • vcollins1•410
    @vcollins1Posted 8 months ago

    Good job completing this challenge!!

    Since main is your page grid, to fix your issue you should try setting main height to 100vh and aligning the content in the main gird to the center. Something like this

    main {height: 100vh; align-content: center;}

    Marked as helpful
    1
    Kaushal Kishore•150
    @KaushalSonicPosted 8 months ago

    @vcollins1 thanks for suggestion, will do it to fix this. :)

    0
  • Kaushal Kishore•150
    @KaushalSonicPosted 8 months ago

    Again it happen :( can anyone help me with this overflow issue, I built this challenge using 100% of my chrome scale. If I will make it same as aspect ratio given then this challenge would overflow my 100% of view height. Will it be okay? or there can be other solution, suggest me thanks.

    0

Please log in to post a comment

Log in with GitHub

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