Fullwidth product photo on smaller screens

Hey,

Can you please post a link so that I can see your current setup?

thanks,
Kevin

Hi @andi0tx,
Try using this css:

@media (min-width: 992px) {
.product-img-case {
    width: 100%;
    float: none;
    text-align: center;
}
.product-summary-case {
    width: 100%;
    padding: 0;
}
}

Does that work for you?

Hannah

Hi Hannah,

thank you. I think you have a typo, you probably mean (max-width) since I want it 50/50 above 992, and 100% below 992. But still, there is a problem:

I don’t mean 100%=no padding, I still want the default padding, I just want both the product image and the summary to be 100% of the container. But the theme sets a max-width on the product image. Try my testproduct at 600px width for example – it is not filling the whole container, even though my image size in Woocommerce settings is large enough and the image uploaded is 1000 x 1000. Do you see what I mean?

Also, I noticed another Firefox issue when using the “large center image” option, but I cannot show it to you at the same time, so I will do that after.

Yes, sorry. Just change “min-width” to “max-width”. Then you can also remove “padding: 0;” from the css. If that is not working can you post a link?

Can you send a screenshot of your firefox issue? https://postimages.org/

Hannah

Hi Hannah,

strange, I had posted a link as my second post but realized now that the post never showed up??

So regarding the first issue:
You can check on a product of the theme demo like here https://themes.kadencethemes.com/ascend/product/ninja-silhouette-2/
Check on dev tools at 600px width for example. The image is not fullwidth inside the container, which is what I would like.

Regarding the Firefox issue: Check my product page with “large center image” enabled in Firefox. The image is cut off on the right side. This is not the case with Chrome though.

1. Try adding this to your custom css box:

@media (max-width: 766px)
.product-img-case {
    max-width: 100%;
}
}

2. I’m not seeing that when I view in firefox or any other browser. Are you using any browser extensions? Can you send a screenshot?

Hannah

1. Nope, you can check my testproduct – still the same.

2. I used a different image now so you can see it better(but it has the same dimensions as the T-Shirt image has, 1000x 1000px). It is cut off in Firefox.

1. Sorry, my css was missing a bracket. Try this:

@media (max-width: 766px) {
.product-img-case {
    max-width: 100%;
}
}

2. Strange. I’m not able to duplicate this issue. I’ll send this over the to developer and see what insight he has.

Hannah

2. Thanks for posting about this, I’ll update with a fix for firefox in the next version. Here is what you can add right now into your theme options > custom css box and get it working:

@media (min-width: 992px){
.kt-product-style-large-image .product-img-case .images {
float:right;
width:80%;
}
.kt-product-style-large-image .flex-viewport {
width:100%;
}
.kt-product-style-large-image .flex-control-thumbs, .kt-product-style-large-image .product_thumbnails.thumbnails {
    width: 20%;
    float: none;
    order: -1;
    position: absolute;
    left: -20%;
}
}

Thank you! Now both things are working ??

One last thing:I want to increase my thumbnails in the gallery and make them the sam size as my main product image. I know you can set the thumbnail size with this filter

add_filter( 'woocommerce_get_image_size_gallery_thumbnail', function($size ) {
    return array(
        'width' => 500,
        'height' => 500,
        'crop' => 0,
    );
});

and this works, but I would love to keep the small 100×100 thumbs for the cart page. In Woo docs there is a filter mentioned to change which image size is used in the different locations:

add_filter( 'woocommerce_gallery_thumbnail_size', function( $size ) {
return 'woocommerce_single';
});

but this does not work, it is still the 100x100px image which is used for the gallery. Any thoughts?

I just pushed out a fix for this. Your filter will work now with the update.

Ben

Thanks to both of you!