Product Page Image on Tablets

This topic has 12 replies, 2 voices, and was last updated 4 years, 5 months ago by Elise Noromit.

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
June 5, 2020 at 11:00 am #200980

scholtobos
Participant

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,

June 5, 2020 at 1:09 pm #201037
Elise Noromit
Member
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
June 5, 2020 at 1:23 pm #201050

scholtobos
Participant

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

June 5, 2020 at 1:40 pm #201061

Elise Noromit
Member

Hello,

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

Best Regards

June 5, 2020 at 1:42 pm #201063

scholtobos
Participant

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.

June 5, 2020 at 1:58 pm #201071

scholtobos
Participant

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.

June 6, 2020 at 6:41 am #201238

Elise Noromit
Member

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

June 6, 2020 at 12:09 pm #201316

scholtobos
Participant

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

Attachments:
You must be logged in to view attached files.

June 6, 2020 at 2:08 pm #201362

Elise Noromit
Member

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

June 6, 2020 at 2:13 pm #201363

scholtobos
Participant

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.

June 6, 2020 at 3:40 pm #201389
Elise Noromit
Member
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
June 6, 2020 at 4:54 pm #201396

scholtobos
Participant

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.

June 6, 2020 at 8:50 pm #201419
Elise Noromit
Member
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