Extra unwanted white space in slide

Hi,

I see that the slides’ images don’t have the standard WordPress paths and they aren’t resized properly, that’s why you got the empty spaces.

Example image in your slider: /wp-content/uploads/2020/09/Almeta-2019Ex1100px-1.jpg?resize=825%2C375&ssl=1.

So, this is a compatibility issue with your active theme or with one of the active plugins.

To figure out which plugin/theme causes this issue, deactivate all the plugins except for MetaSlider and activate the Twenty Twenty One theme, and test if the issue has been fixed.

You may create a new slider to make sure that the previous step has been done properly because I think that one of the plugins or the active theme has already uploaded your website images and thumbnails to locations that WordPress doesn’t usually use and I’m afraid that MetaSlider will keep using these images paths even if you deactivate this plugin/theme.

Anyway, the following steps will force the sliders images to have the 375 height which is the height you already set in your slider:

Please try the following to add CSS to a slider:
– Open your slider for edit.
– Click add CSS
– Add the following CSS to the editor:

body .metaslider .flexslider .slides img{
    max-height: 375px !important;
}

– You can replace the 375px with another height.

Thanks.

The image you mention: /wp-content/uploads/2020/09/Almeta-2019Ex1100px-1.jpg?resize=825%2C375&ssl=1.
Is already sized to 1100 x 500px which is the size the slider is set for.
That file is in the standard location.
That slider has been working fine for 5 months until last week. The theme was not updated recently, it last updated in October 2020.
There is no ‘add CSS’button.
So I deactivated all plugs, that fixed it. I activated then one by one, Jetpack is the problem. BUT I use this same configuration of plugs and theme, including JetPack, on several sites without any problems. Those other sites use JetPack image acceleration, I tried running JetPack without the image acceleration it still produced the white space error.

thanks for sharing this information. As the issue comes from JetPack, then I advise you to contact their support to fix this issue for you.

In case you want to proceed with the workaround that I provided in my previous reply, you can find the “Add CSS” button at the top bar of the slider edit screen.

This screenshot will guide you to find the “Add CSS” button: https://paste.pics/BONOB

Also, you can use a plugin to add the CSS snippet I provided previously. You may try this plug: https://www.ads-software.com/plugins/custom-css-js/