[Resolved] Product image not staying within column width

[Author]

Posts

[jamesW-26]

Tell us what you are trying to do?
Build a product template

What is the link to your site?
hidden link

Am trying to build a Woocommerce product template. I created a Container, within that I put 3 columns, in the first column I put the product image. When viewing a product, the product image does not stay within the boundaries of the column.

[Jamal]

Hello and thank you for contacting the Toolset support.

It seems that the theme's styles or WooCommerce styles are overriding the styles that you have defined with blocks. Please check if this issue appears when:
- Only WooCommerce and Toolset plugins are activated. It will tell us if there is an interaction issue with another plugin.
- The theme is set to a WordPress default like Twenty Fourteen. It will tell us if there is an interaction issue with your theme.
If the problem disappears, start activating one at the time to track where the incompatibility is produced.

If it persists, please allow me temporary access to check this closely, I might also need to take a copy of your website for further analysis. Let me know if that's ok. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[Jamal]

Thank you for your feedback and for the access credentials.

From what I gathered so far, the styles for the images, or precisely, the gallery is set by a Javascript script. And I could not find a way to overcome it yet. Maybe that's a bug that appears on edge cases(a combination of images, theme styles, WooCommerce, and Toolset).

To further investigate this issue, I'll need to debug it further on my local computer, would it be possible to install the Duplicator plugin and take a copy of your website?

[jamesW-26]

Hi Jamal,
I'm going to re-add that product and see if it fixes the issue. Will let you know.
James

[Jamal]

Hello James, my apologies for the late reply, but I do not work on Sundays and Mondays.

I am settings this ticket as waiting for your feedback, it should be kept open for 3 weeks.

Let me know if recreating the product helps, or if I can take a copy of your website for further investigation?
Hopefully, the recreation of the product will fix it.

[jamesW-26]

Hi Jamal,

I've narrowed down the problem. It is related to the product gallery thumbnails. If there are only 6 (or less) thumbnails beneath the main image then it displays fine. But if you add more than 6 then the width of the thumbnails container gets wider and overlaps into the next column.

Can you please have a look?

[Jamal]

I tried to reproduce the issue with this last detail with a default theme such as TwentyTwenty or Storefront but the issue was not reproduced. I would say, that it is caused by a conflict with your theme(JupiterX) or probably an edge case that appears only on your server.

To investigate both cases, I will need to take a copy of your website. We prefer to use Duplicator as explained in this article https://toolset.com/faq/provide-supporters-copy-site/
Please use filter to reduce the size of the copy as described in this video around 1:00 hidden link
If Duplicator fails to create a copy, we'll need a database copy/export, plugins, and theme folders, all in a zip file.

Your next reply will be private to let you share the download link safely.

[Jamal]

You are right, to check this images related issue, we'll need images. Unfortunately, I could not build a Duplicator copy with or without images. So I installed a plugin and downloaded your theme, child theme, JupiterX Core, and Raven plugin, and I tried with them on my local install to no avail. The issue is happening only on your website.

We'll need to have a copy of your website for further analysis. As Duplicator did not succeed, let's use the old school way, I'll need:
- Export of the database.
- A zip file of your website. Or at least with the plugins and themes folders. Your next reply will be private to let you share the download links safely.

[jamesW-26]

Hi Jamal,

I have a feeling that Minesh (form your support team) successfully created a Duplicator copy of the site. Can you please discuss with him?

[Jamal]

Hello,

I could not work with the copy that Minesh created, so I created another copy and worked on it locally.

I still do not see what is causing this issue, but I used a custom CSS code on the content template to fix it:

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
  float: none;
}

I also implemented this fix on your website and it is working.

Please, let us know if this is a viable solution for you.

[jamesW-26]

Hi Jamal,

Thanks for that. It's almost working properly. It looks as though when there are more images they get smaller ... with up to 5 images they are 78px x 78px, but the more you add the smaller they seem to get ... I add more images to the product link above and the images thumbnail sizes are 51px x 51px, also the left/right buttons cover over the images. Is there a way to have the images stay at 78px x 78px and for the carousel navigation to not cover over them?

hidden link

James

[Jamal]

I can see the issue, but I do not see an easy way to force the images to be at 75px. The width of the thumbnails in the carousel navigation is calculated on the browser with the Gallery Javascript code.
I could not reproduce this on a clean install with the Twentytwenty theme or Storefront theme. They both do not create carousel navigation.

I was able to reproduce the issue on a clean install with the JupiterX theme, I'll escalate this issue to our compatibility team and I'll get back to you very soon.

[Jamal]

Our 2nd Tier will be investigating this issue. The ticket is now escalated, I'll get back to you as soon as we have anything to share.

[jamesW-26]

Thanks very much for the updates Jamal

[Jamal]

Our 2nd tier suggests a solution that requires dropping the thumbnails navigation slider. This is a feature provided by the theme that we won't be able to fix. Maybe the JupiterX support team can help here too.

We suggest disabling the thumbnails navigation slider and fixing the styles of the generated thumbnails to fit within their parent block(column block). I tested it on my local setup and I would like to check if it is a viable solution for you.
1. Disable the thumbnails slider by adding the following code to the child theme functions.php file:

add_action( 'wp_print_scripts', 'ts_dequeue_jupiterx', 100 );
function ts_dequeue_jupiterx(){
 
    if ( is_singular( 'product' ) ){
        wp_dequeue_script( 'jupiterx' );
    }
}

2. Fix the thumbnails styles by adding the following Javascript code to the content template:

document.addEventListener("DOMContentLoaded", function (event) {
    (function ($) {
 
        var columnWidth = $('.wooviews-product-image').width();
        $('.flex-control-thumbs').css( { "max-width":columnWidth, "flex-wrap":"wrap" } );
        $('.flex-control-thumbs li').css("margin", "4px");
 
    })(jQuery);
});

I hope this helps. Let me know your feedback.