Home Forums WoodMart support forum Product Page Image on Tablets

Product Page Image on Tablets

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #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,

    #201037

    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

    #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.

    #201061

    Hello,

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

    Best Regards

    #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.
    #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.

    #201238

    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

    #201316

    scholtobos
    Participant

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

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

    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

    #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.
    #201389

    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

    #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.
    #201419

    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

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