Submitted over 3 years ago

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

Franco A.• 200

@franco-a

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

3-column preview card component

HTML
CSS

1newbie

View challenge

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

@ASteven21

Posted 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.

Franco A.• 200

@franco-a

Posted over 3 years ago

@ASteven21 Thanks! This fixed it :D

Antonius Steven• 100

@ASteven21

Posted over 3 years ago

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

Panagiotis Panagiotakopoulos• 415

@PanuGr

Posted over 3 years ago

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

Please log in to post a comment

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