Product-preview-card-component

Replace <div class="cart"> with the main tag and <h2 class="product_name"> with <h1> to fix the accessibility issues

To .cart on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body. Instead of giving .cart position: relative and its properties.

Give .cart a fixed width value instead of a percentage width value

Use rem and em as unit for the padding, margin and width values instead of percentages and px for more on CSS unit watch this https://youtu.be/N5wpD9Ov_To

Hope am helpful. Happy coding.

Hey @EndoHr, congratulation on completing the first challenge.

add

body {
    /*background-color: hsl(30, 38%, 92%); */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

remove position left and top property from cart class.

.cart {
    /* position: relative; */ 
    /* left: 28%; */
    /* top: 80px; */
    display: flex;
    border-radius: 10px;
    width: 35rem;
    flex-direction: row;
    overflow: hidden;
}

• remove height and replace width:21%; with width:50%; in the .perfume class.
• replace width:21%; with width:50%; in the .details class.

remove top and left property from the media cart class.

@media only screen and (max-width: 600px)
.cart {
    /* top: 10px; */
    flex-direction: column;
    /* left: 5%; */
    width: 100%;
}

• replace /* width: 90%; */ with width: 100%; in the media .perfume_mob class.

hey Endo_hr😄 Firstly I congratulate you on completing the first challenge,I see you are having a problem, you can make whole body as flex.

1. you can try

display:flex;
align-items:center;
justify-content:center;
}``` .This will the whole `cart `-div centered.

2. and for the `details-div` you can use the
 ```.details{
display:flex;
align-items:center;
justify-content:space-between;
}```. along with some padding. I hope this helps and let me know if you need any further assistance💯.. happy coding🔥

Hello, nice job for finishing the project!

You can center the card using "display: flex" on your body tag, "justify-content: center", and "align-items: center".

use width:50% for the image and the description, and then, set the card max-width to 500px. Your problem is, the image and description didnt fill all the space (100%) of the div "cart" class.

for the border-radius problem, this might help you:

use "overflow: hidden;" on the card element (in your case, the div "cart" class).