Responsive product preview card component

Hi @ajay117,

Nice job on your first attempt of the challenge

You can the change the width: 60% to max-width: 50%; that way it's more responsive. To center a card easily you can use flexbox replace your body rule with the below.

body {
    margin: 0;
    background-color: var(--cream);
    font-family: "Montserrat", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

in order for this to work you need to remove the following properties every on the main tag rule.

main {
    border-radius: 10px;
    background-color: var(--white);
    margin: 0 15px;
    /* position: absolute; */ **remove**
    /* top: 50%; */ **remove**
   /* left: 50%; */ **remove**
    /* transform: translateY(-50%); */ **remove**
}

Hope this is helpful

Hello Ajay 🙋🏻‍♂️, Congrats on completing this challenge

I checked your solution code, and I found small mistakes in your code

• Don't specify the width component in the @media query, try specifying the width in the main tag
• Don't use percentage to define width, we only use percentage to make responsive images. So you can use units like px, em, rem to define a fixed width for your component, and you can write @media query when your design crashes

I hope my feedback was helpful 🙌🏻