Skip to content
Submitted over 3 years ago

My second challenge: 3 column preview card component

Floripin•60
@Floripin
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

There is one thing I would like to optimize but don't know how: when hovering on the buttons, the text slightly moves right-down. I had the same problem with the button, which I resolved by putting it's position to absolute and adding some padding at the bottom of the container to keep it at the right place. But with the text, the problem is that the button is sized based on its content and it seems having an absolute inside an absolute does not work. Any ideas? :)

Also, shoot all your other improvement comments! :D

Community feedback

  • Smita•375
    @Smita-14Posted over 3 years ago

    It is the border property that you have applied on button pseudo class that shows up making it look like it expands from right and down. Just remove the border properties from pseudo class and add it to the button instead. It works.

    Marked as helpful
    1
    Floripin•60
    @FloripinPosted over 3 years ago

    @Smita-14 Works fine! Thank you very much! :)

    1

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