Skip to content
Submitted over 1 year ago

3-column preview card component using CSS grid

Abhinav•90
@ZOROexe
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This challenge helped me to understand grids and its uses and how to implement them. Enjoyed this challenge. Every tips and feedbacks are greatly appreciated.

Community feedback

  • Kamil•40
    @Owczarek-KamilPosted over 1 year ago

    Hello @abhinav

    To center the content in desktop mode:

    1. Remove min-height: 140vh from the body
    2. Remove height: 100vh; from the .container

    and this should do the trick

    In case of moving cards when hovering the buttons. I see that when button is hovered you apply the following styles: 'border: 1px solid white', this 1px of border makes the card move.

    To solve it just apply 'border: 1px solid white' as a regular style to the button (not only when button is hovered or focused on)

    Marked as helpful
    1
    Abhinav•90
    @ZOROexePosted over 1 year ago

    @Owczarek-Kamil Updated my solution and it worked. Thank you so much.

    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