Single product page images css fix

Hi, I need to make main product image bigger and gallery images smaller

Something like this: https://imgur.com/a/1esFemE

This is config setup: https://imgur.com/a/8VMqss9

Can you please help me with css?

Hello,

Changing the sizes of images using CSS might affect the quality of the images. If you still want the CSS then try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings.

.product-images-inner .slick-slide img {
	height: 80px;
	width: 80px;
}

You can try setting the image to large from the settings as you mentioned in the screenshot.

Best Regards.

Thanks for your answer and sorry, I was not clear in previous post

I am changing size of galery images, its here on the screen: https://imgur.com/a/1esFemE

I can’t make the main product image to fill this space: https://imgur.com/a/qZM8nn5

So gallery images will be smaller and main image will be bigger to fill the gap

I am trying something like this, but I have 2 problems

1. White line is appearing on the image
2. My other columns are also changed, like footer columns

https://imgur.com/a/WsGfEvc

Hello,

I saw the screenshots you attached. It is happening because of the CSS you are using for the main product image.

You can only select the size of the image from the product image layout option.

Best Regards.

[Author]

Posts