Hotspot cut by container if row stretch is used

Hi, as soon as row stretch is set to one of 3 stretch options hotspots are being cut buy container. Only part of hotspot which is inside this row is shown, part which should be rendered outside is being cut.
See example below:

Hello,

Please update the site admin access to the private area I cannot view your site.

Best Regards

Sorry, site was in maintenance mode. I disabled it.

Hello,

Please try to set the row width “Stretch content” https://wpbakery.com/video-academy/full-width-row/

If it does not help, please provide your site admin access to the private area.

Best Regards

Hotspot is being cut when I select “stretch row”, “stretch row and content” or “stretch row and content (no paddings)”. Hotspot is being fully shown only when I set row stretch to “default”.

Hello,

You need to add padding to the element as shown: https://gyazo.com/d6b331136f98d78ff344721b1d3d3022 For now, I have added 300 px to test and you will get the result like this https://gyazo.com/0fdd6871794ffd34947ba7aefd15e72f

You can reduce or increase the padding.

Best Regards

This worked to some degree, but seems more like a workaround than a true solution. This way I have to make significant gap between rows, otherwise hotspot is being cut where next row begins. This does not happen when row is not stretched – hotspot is being overlapped over next row content (this is what I want). See pics attached:

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.container .vc_row.woodmart-disable-overflow,
.container .vc_section.woodmart-disable-overflow {
    overflow: visible;
}

This will be fixed in the next update.

Best Regards

Thanks, the code worked.

You are welcome! If you have any questions please feel free to contact us.

Best Regards

The code you provided works great, but I found one situation when I am still facing the same problem – hotspot container is being cut. This happens when I use hotspot inside Woodmart slider, can you please provide some solution.
Check below for link to page with issue:

Hello,

Please provide updated access to your site.

Best Regards

Here it is:

Hello,

We have checked and have to inform you that the carousel is not intended for the hotspot element.

The slider nature requires blocks to have overflow: hidden. If we set overflow: visible for slider blocks, all other blocks would be shown https://gyazo.com/2ff5412813e101060a2fef4d68f4bfd8

The hotspot nature requires overflow: visible. That is why it is not possible to correct with CSS.

Best Regards

OK, please consider adding hotspot support to slider in future.

Maybe it’s possible to display hotspot images using some carousel where you don’t have to use “overflow: hidden” ?

Hello,

No, any caurouse or slider will have this style. You can try to place the hot spot a bit higher and use Text in the Hot spot content which would not have such height as a product has and it will fit fine. You can set the link to the product of the Text.

Best Regards

[Author]

Posts