Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

3 Column Preview Card Solution

@umutcankocamis

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello Dear Frontend Mentor Community, When I hover over the buttons, the text goes up. What is the solution to this?

Community feedback

@KarimAyman97

Posted

Hello Umutcan Kocamış Great Job!

I would like to suggest a solution. Begin by setting a transparent border for each button initially. Upon hover, apply the desired color and adjust the border accordingly


.sedans .learn-more {
        color: hsl(31, 77%, 52%);
        border: 1px solid transparent;  // give it initially transparent border
} 


.sedans .learn-more:hover {
  border-color: hsl(0, 0%, 95%);  // give it the desired colored border on hover 
  color: hsl(0, 0%, 95%);
  background-color: hsl(31, 77%, 52%);
}

Marked as helpful

0

@umutcankocamis

Posted

@KarimAyman97 Thank you Karim! It worked

0

Please log in to post a comment

Log in with GitHub
Discord logo

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