Skip to content
Submitted almost 2 years ago

3 Column Preview Card - CSS GRID

Ralph Virtucio•670
@ralphvirtucio
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

I notice that when hovering my Learn More button my whole content is slightly moving up ? Why is that happening? I try googling but I can't find any answer.

Community feedback

  • Saulius K.•560
    @TH3RIVPosted almost 2 years ago

    Hi, @ralphvirtucio!

    Your content is not moving up, your whole container is expanding and that is because you are adding 2px border on button:hover. This then expands your whole container. Move the border property from the :hover state to the button itself and that should fix it.

    Hope this helps!

    Marked as helpful
    0
  • Ikenna Oguejiofor•540
    @ikennarichardPosted almost 2 years ago

    I think is because of the 2px border that gets added to the button when you hover, also add it tothe button when its not hovered.

    Marked as helpful
    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