Product image on mobile to big

Hello,

I would like to make my product images on mobile smaller. At the moment when I go to a product on mobile the product images takes in the entire screen. I would like to have this smaller so that without scrolling you already see some information about the product.

In the theme setting inder product page, images the size is already set to small image.

Hello,

I have visited the URL you provided.

This is the default behavior of the product page display for mobile and there is no option available to change it.

If we try to change the height using Custom CSS then the images will be cut off and lose quality.

Best Regards.

Please help me to change this. This should really be possible by changing the scale of the picture with custom css.

Please help. this will make the mobile product page much more professional and better for users.

Thank you.

Hello,

As I mentioned in my previous reply, the images will lose quality if you try changing their height using CSS.

If you still want the CSS then try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.product-images img {
	height: 200px;
}

Best Regards.

Thank you however this doesn’t work. See image attached.

Thank you however this doesn’t work. See image attached.

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached.

It seems that you haven’t added the CSS correctly. Please try re-adding the CSS and check back.

The CSS will only change the height of the images and will affect the quality.

If the CSS still doesn’t work then provide admin panel login details of the website to check it myself and help you out accordingly.

Best Regards.

Sorry but you are not correct. I just copied your CSS code. See printscreen attached.
So please give the right css

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached.

Please try replacing the previous CSS with the following in the Custom CSS for the Mobile area.

.product-images img {
	height: 200px !important;
}

If it still doesn’t work then provide admin panel login details of the website to check it myself and help you out accordingly.

Best Regards.

Still the same. And I’m sure that I copied the right CSS.

Please find the requested infomation here.
PLease do not make changes I can not revert myself anymore.

I managed to make the image smaller myself with the folloing code:

.product-images img {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
height: 340px;
}

HOWEVER the image preview below it is now very big. Can you give me the CSS code to just completely hide the images below the actual product image just for mobile.

I managed to do it with the following code;

.woocommerce-product-gallery .thumbnails {
display: none;
}
.product-images img {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
height: 340px;
}

The only problem that I have now is that the reduction mentioning is not anymore on the image itself. How can I set this on top of the image in the right corner

See image for clarification

Attachments:

You must be logged in to view attached files.

Hello,

We are glad that you managed to do it using CSS.

I saw the screenshot you attached.

For the label try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

.product-image-summary .product-images .labels-rounded .product-label {
	position: absolute;
	right: 49px;
}

You can adjust the value according to your needs.

Best Regards.

[Author]

Posts