using css flexbox

To center .cards on the page using flexbox, replace the height in the main with min-height: 100vh.

For a responsive content .give .cards a fixed max-width value and there is no need to give it a height and min-height value. Give .card a padding value for all the sides.

in the media query reduce the max-width value.

Give the body a background-color

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

I'd like to share you that remarks

• You must delete height: 500px for desktop, the card should change a height

• You don't need to set a position: absolute for you button

• You must set on the.btn-click text-align: center, to center a text inside a button

• You must to set a border-width on the px to make that rounded

Happy strides on that road)

Hello there 👋. Good job on completing the challenge! Here are some suggestions regarding your code that may interest you.

Your solution looks great for the desktop screen, I would recommend a few changes in CSS for your button so that it will look perfectly round and also consider repositioning the button.

See below the CSS code for the desktop screen...

.btn-click {
    border-radius: 135px;
    top: 75% /* Or maybe 80%  */
}

For the mobile screen, I would recommend a few changes in the media query see the below code.

CSS

@media (max-width: 480px)
{

main{

/* height: 100vh; */ 

}


.card {
    /* width: 100%; */
    /* height: 100%; */
    padding: 5rem;
}

.btn-click {
    left: 38%;
    top: 94%;
}

}

I hope you find my comment useful, 😄 Nevertheless, the solution you submitted is great! 🎉 Happy coding