Quick View image is not displaying correctly

[adrianovsky]

Hey. I found a problem on my site that needs to be fixed before the site launches, but I'm not able to figure it out on my own. When I go to the quick view of a product, the picture of the product itself spreads across the entire section. Could someone help me with the fix?
www.lumitica.com
beifri

 

[akshay_bhatt]

hey @adrianovsky ,

first of all

Inspect the CSS

Adjust the CSS

.quick-view img {
    max-width: 100%; /* Ensures the image doesn't exceed the container's width */
    height: auto; /* Maintains aspect ratio */
    object-fit: contain; /* Ensures the image fits within the bounds without stretching */
}

Got it! If you found my suggestions helpful, please consider liking or marking it as a solution.
Your feedback is appreciated! If you have any more questions or need further assistance, just let me know.

regards

Akshay bhatt

[adrianovsky]

I put it into style.scss but it doesn't working.

[akshay_bhatt]

hey @adrianovsky ,

give access of your website

[adrianovsky]

I would prefer not to give any stranger access to the site.

[adrianovsky · Accepted solution]

I actualy do it on my own. This code helped me:
#product_quick_view img {
max-width: 400px;
width: 100%; /* This ensures the image scales down to fit the container if it's smaller */
height: auto; /* Keeps the aspect ratio */
}
.swiper-slide img {
max-height: 60px;
}