Skip to content
Submitted over 1 year ago

3-column preview card component solution

Ashwani Pandey•180
@ashwanipydev
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 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,680
    @hitmorecodePosted over 1 year ago

    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

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