Submitted almost 3 years ago

responsive layout page using CSS flex

@yazanMhussein

A solution to the Product preview card component challenge

Solution retrospective

To be my first design, I found everything too hard! But with research on YouTube and other site. I learn about flex and grid layout and the difference between CSS units. And the rest of it came easier. any feed back would be helpful thanks.

Code

Please log in to post a comment

Community feedback

Hyron•5,870
@hyrongennike
Posted almost 3 years ago
Hi @yazanMhussein,

Good job on the challenge

If you want to center the card you can add the following to your CSS body rule.
```
body {
    /* margin-left: 25%; */ **remove**
    /* padding: 5% 5% 0% 5%; */ **remove**
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: hsl(30, 38%, 92%);
}
```
this can be used for other challenge to center cards. Hope this is 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