Skip to content
Submitted almost 3 years ago

My solution to grid cards

Web Wizard•5,690
@rsrclab
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Testimonials grid section
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

Any feedback is welcome here!

Community feedback

  • Travolgi 🍕•31,400
    @denieldenPosted almost 3 years ago

    Hi Tymur, great job! The hover effect is fanstastic :)

    You seem to have forgotten about the background-color in the body.

    To center the elements on the page try using Flexbox, it can help you better: give the flexbox and height properties to the body and remove margin from the .grid-cards class.

    Read the guide -> Flexbox

    Note: Flexbox aligns to the size of the parent container.

    You can use the vh measurement for the height... Viewport Height handles the sizing of an element in relation to the height of the browser window.

    Hope this help ;)

    Marked as helpful
    0
    Web Wizard•5,690
    @rsrclabPosted almost 3 years ago

    Thank you, @denielden ~

    1
    Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted almost 3 years ago

    @denielden but don't forget to use min-width:100%; on the body maybe next time.

    0
  • LiBee•370
    @Li-BeePosted almost 3 years ago

    Looks very good - well done! I dont think the background-color on the <body> has been applied.

    Also have accessbility issues need to solve. I think if you add <main> to the <body> it should solve the issues.

    Marked as helpful
    0
  • Kamasah-Dickson•5,590
    @Kamasah-DicksonPosted almost 3 years ago

    I think a little bit of margin to the card bottom is needed Good job:)

    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