I have this strange problem that emerged after the latest WooCommerce update. I’m running a Storefront theme. When you visit the single product page, there is a significant space between the main product image and the product image grid (1000+px). This gap goes away when you

1. Resize the browser window
2. Click on one of the other images

I’ve been unsuccessful in finding a fix anywhere so far, though that may be due to my lack of google-foo. I’m unsure how to debug this beyond what I’ve already done.

* Ensure that my template files are up to date
* Ensure that there’s nothing happening with other plugins that might cause this issue
* Ensure everything is updated correctly.

Any help would be greatly appreciated.

I love your plugin and have done a pretty cool custom slider with it, but have one issue. I have managed to float the image container to the left and link buttons floated to the right. They do scale nicely. The problem is this:
If you open the page in a skinnier browser size (i.e. 800px), then maximize the browser window to full width (i.e. 1,600px) , the first image shows the correct larger size, and then the next image reverts to the original size when the page was first opened. In other words, the browser remembers the original image container size. You have to refresh the browser in order to get the image to the correct container size. If not, then there is a big space between the image and the buttons with the wrong image size. I hope it’s fixable. Client is pretty concerned about it.

I have the image container floated left at 70% and buttons floated right at 30%. They should stay together always as screen resizes.

Here is the link for the page. It’s worse on IE.

Thank you for your continued support.

https://www.ads-software.com/plugins/meteor-slides/

When I resize my browser window,(with stable height), what happens is the following: The top div gets smaller, as the height is set to auto. So I get to see things that I would have to scroll down in order to see then with larger widths. What I want is to see for all the width sizes, the same homepage photo. (of course, I mean part of it)

While this is the site I want to correct : https://www.alatimou.com/
Thanks in advance.

So I noticed that tippy wasn’t re-sizing properly for mobile browsers and some of the popup didn’t look like it “connected” well.

Basically you need to set a max-midth allowed for the header-body and tooltip window for it to resize for mobile devices.

I also resized the default width to be 450 pixels all around.

File modified:
jquery.tippy.css

.tippy_tip {
    max-width: 100%;
    width: 450px;
    height: 300px;

    border-radius: 5px;
    box-shadow: 0px 0px 3px #888, 4px 4px 6px #888;

    z-index: 50;
}

.tippy_header {
    background-color: #ccc;
    max-width: 100%;
    width: 450px;
    padding: 5px;
    border-radius: 5px 5px 0 0;

    font-weight: bold;
    text-align: left;
}

.tippy_body {
    background-color: white;
    padding: 10px 15px 10px 15px;
    max-width: 100%;
    width: 450px;
    max-height: 275px;

    border-radius: 0 0 5px 5px;
    position: relative;

    overflow: auto;
}

https://www.ads-software.com/plugins/tippy/