Skip to content
Submitted over 3 years ago

Three Column Preview Card (Responsive, SCSS, BEM, Semantic HTML)

Franco A.•200
@franco-a
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

Hello! I have a problem with the buttons. If you hover a bit to the right of the button it is still clickable when it shouldn't be. How do I prevent this? Feedback is highly appreciated!

Community feedback

  • Antonius Steven•100
    @ASteven21Posted over 3 years ago

    Hi @franco-a!

    Great work on this one!

    Try using display: inline-flex in your button div instead of display:flex. I tried it in the browser and it seems to work just like you wanted.

    1
    Franco A.•200
    @franco-aPosted over 3 years ago

    @ASteven21 Thanks! This fixed it :D

    0
    Antonius Steven•100
    @ASteven21Posted over 3 years ago

    @franco-a No problem! Happy to help :)

    0
  • Panagiotis Panagiotakopoulos•415
    @PanuGrPosted over 3 years ago

    Because your button is a link. Links take the whole width.

    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