3-column-preview-card-component

Hello

congrats on completing this challenge 🎉🎉🎉🎉.

nice solution by the way but I have a few adjustments for you:

• instead of using the flex-wrap: warp property on the .root element to make the layout for the mobile version to make the site responsive for different screen sizes you can use media queries like this:

@media(max-width: 768px) {
    .root {
        flex-direction: column;
    }
}

• also I noticed that you did not add the hover effect to the button but you did add the focus effect, you can add this code to add hover:

button:focus,
button:hover {
    background-color: transparent;
    color: white;
 }

• also you can add the transition properly on the button to make the transition smooth use this property transition: all .3s;.

I hope you find these adjustments useful.

Happy Coding :)

Hi, good job! But you can get the card in the middle of the page with code below:

body{
    min-height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

Happy coding...

Enis