Product Page Image on Tablets

Hi Artem, Aizaz and Elise,

On tablets product images are medium sized, but I want them to be small sized (just like I selected in theme settings). Please see screencast https://screencast-o-matic.com/watch/cY1h6mpRe6

After watching the screencast and clicking the link (and resize the screen) you see there is no difference in image size between small and medium “Product image width” on tablets.

What do I have to do to make the image be small like it is on desktop screens?
Kind regards,

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

@media (max-width: 1025px){
.product-images.col-md-6,
.product-images.col-12{
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
		max-width:405px;
	margin:0 auto;
}
}

Best Regards

Thanks, are you going to fix this structurely in next release? Then I know if I can remove this css snippet in the future.

Hello,

We cannot add this for all as the majority of users require images to be bigger on smaller devices.

Best Regards

Whaaa. I was too fast. I’m not satisfied with your answer. This code only makes the image smaller, not the column. So the text column doesn’t get full space it needs. That’s why i need to be the image smaller. Duh;-)

See screenshot.

Attachments:

You must be logged in to view attached files.

In reaction on #201061

I’m sorry Elise. This is totally a programmers fault. When chosing small OR medium in theme settings the image size on tablets is exact the same. Now you don´t give your users the choice to show a picture small or medium sized.

Hello,

Please upload a big image and check the block size with the big image. Small image would be the same, you are right.

Best Regards

block-size: 343px (see screenshot and i added deeplink to page)

Attachments:

You must be logged in to view attached files.

Hello,

You wanted the image to be the same on the desktop and on mobile. Right? I have provided the custom CSS. Does it work?

I have set the column to be of fixed width as you requested. That is why no matter what you chose the image is the same. Please clarify the purpose.

Best Regards

On tablet same as desktop. Your solution only makes image smaller, not the total column. See att. Please provide me css to make the total column smaller.

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Tablet:

@media (max-width: 1025px){
.product-images.col-md-6{
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.product-images.col-md-9{
-ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
	}
}

Remove the code I provided before.

Best Regards

I added the code, but now I have unwanted space on the other side. See attachment.

Attachments:

You must be logged in to view attached files.

Hello,

Change this code:

.product-images.col-md-9{
-ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
	}

for this:

.product-images.col-md-9{
-ms-flex: 0 0 78%;
    flex: 0 0 78%;
    max-width: 78%;
	}

Try to increase /decrease the value until you get the best result. Tablet devices may vary in their widths and it is not possible to guess what is the best for each. That is why I would suggest using default styles in the grid.

Best Regards

Best Regards

[Author]

Posts