Skip to content
Submitted over 4 years ago

Four Card Feature section using html, css and javascript

Gagan Arora•110
@Scoro6
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

This is my third challenge and I think there is little problem with shadow as I couldn't completely replicate the one shown so how can I do that? Hope anybody helps me.

Community feedback

  • Ramsay Sewell•585
    @ramsaysewellPosted over 4 years ago

    Hi Gagan,

    Well done for cmpleting this challenge.

    As for the alignment of the grid, I would try setting a max-width property of the grid section as it's currently spanning 100% of the window, forcing it to misalign.

    If you add max-width: 1000px and make sure to align center your content in the page, you should be able to see the optimised layout. You can align center using Flexbox or simply margin: 0 auto, meaning "automatically adjust from the left and right while not having any margin on the top".

    If you try this out on your solution, you should find it to be a lot more responsive and friendly to work with.

    Well done!

    Ramsay

    1
    Gagan Arora•110
    @Scoro6Posted over 4 years ago

    @ramsaysewell Hey Ramsay! Thanks for feedback I will definitely look into it to make it more responsive.

    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