Not Found
Not Found
Not Found
Request failed with status code 502
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 component solution

@ashwanipydev

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 Frontend Community, I wanted to start my frontend journey, but I am facing a lot of problems in my code. Please help me out with this situation; I feel so tired. I have some questions during this project. Please review and give me some answers on how to remove the errors in the project. Q1: How to optimize our code and make it more readable?

Community feedback

hitmorecode 6,230

@hitmorecode

Posted

Congratulations well done. One thing I've notice is that when hovering over the buttons the cards grow and shrink. The reason why this is happening is, because you removed border from the buttons. When hovering over the button the border is added therefor additional pixels are added. You can fix this by giving the cards a fixed height or you can add border on the button.

.btn{
border-radius: 1rem;
border: none; /*1px solid var(--main-btn-col) */
background-color: var(--main-btn-col);
padding: .5rem 1.75rem;
cursor: pointer;
font-size: .76rem;
font-weight: 400;
font-family: var(--ff-neutral);
}

The reason for 1px (keep the same as on hover) is because the button gets 1px on hover. So there is no addition nor subtraction of pixels.

Marked as helpful

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