Submitted almost 3 years ago

3-column-preview-card-component

Payal Deshmukh•20

@DeshmukhPayal

A solution to the 3-column preview card component challenge

Preview Code

Solution retrospective

While designing a solution for a 3-column-preview-card I faced two difficulties:

using 'margin: auto; ' didn't bring the container of cards to the center
display:flex; justify-content: center; align-items: center; This brought the container to the center horizontally, but vertically it was still stuck to the top of the screen. So had to use 'margin-top:9rem; ' to bring it to the center. Why both the cases didn't work properly? Is there any other solution to bring the container to the center? When hovered on Learn More button size of the respective card is slightly increasing. All feedbacks and comments are welcome.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Payal Deshmukh's solution.

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