Submitted almost 3 years ago

Frontend | Perfume Product

Muhammad Ammar•50

@ammarqureshi120

A solution to the Product preview card component challenge

Preview Code

Solution retrospective

This is my another challenge. Please give your feedback so that I can improve more.

Code

Please log in to post a comment

Community feedback

Madiha Khan•420
@madkn1311
Posted almost 3 years ago
Hello Ammar,

You designed the card really well. :)

To center your card you should do the following:

min-height is the best option as it will change when needed(i.e enable responsiveness). Plain height property won't allow responsiveness.
```
body{
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
```
Marked as helpful
AlwinJun•230
@AlwinJun
Posted almost 3 years ago
Mr.Ammar you can put your main content inside of main tag for better accessibility or put a role attribute with a value of main in your card-container element <div class="card-container" role="main">. By the way nice job.
Marked as helpful

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