Product preview card component

Hey how is everything? Hope all good.

Here my Tips:

1: for the image to occupy the 100% of the height first put

.perfume-container {
 max-height : 600px;
}

.perfume-picture {
width : 50%;
}
.perfume-container .perfume-picture img {
 height: 100%;
}

that should make the img 100% height.

2: to align the content to the center you can delete the margin on .perfume-container and add display:flex to body and flex-direction column.

If you need help with anything just text me me ;)

Hi,

Excuse me in advance if I make some English mistakes

@media only screen and (min-width: 375px) and (max-width: 760px)

There is two things

1. I think this exercise wanted to give 375px as the value for mobile devices so it needed to be set as the max-width

2. With this code, your website reverts to desktop format below the min-width value which is not desirable. ( + the modal is not correct anymore, the white background on the right side disappears )

For the details :

The " Add to Cart " button is not centered horizontally

.perfume-container .perfume-information button img {
     height: 2vh; 
     align-items: center; (not needed)
     position: relative; (not needed)
    left: 24px;
}

.perfume-container .perfume-information button #text {
    /* position: relative; */ (not needed)
    /* left: 80px; */ (not needed)
    bottom: 3px;
    font-family: "Montserrat", serif;
    font-weight: 600;

.perfume-container .perfume-information button { 
    [...]
    cursor: pointer;
    position: relative; (not needed)
    right: 5px;
   /* New lines */
    justify-content : center;
    align-items: center;

To simplify responsive, you can use the vw, vh units and max/min-width with absolute value to delimitate if necessary

Feel free if you want to ask for more tips and your website is pretty good btw !