LayerSlider width being ignored

Thanks @ceubri but that didn’t work. The images are 700 px by 467 px and that is what LayerSlider is set to, but @Jordan’s suggestion still didn’t work and I had to add this CSS as well to get it working.

.ls-wrapper.ls-bg-outer {
	width:700px !important;
	height: 467px !important;
}

.ls-bg {
	width:700px !important;
	height: 467px !important;
}

One last question: is there really no way to remove the need for all this CSS and get LayerSlider to use the specified canvas width and height in Slider Settings? Or to put it another way – isn’t this a bug in LayerSlider given that it ignores the canvas dimensions?

It is not a plugin conflict, it is a problem in LayerSlider and/or Enfold.

I have deactivated all plugins and removed the additional CSS to test this out.

When the slider type is set to Responsive in LayerSlider Slider Settings with a canvas width and height of 700 px and 467 px respectively, all the slider images (which are all actually 700 px wide and 467 px high) are expanded to fill the layerslider_X div, which has values set of width: 863px; height: 576px;.

This is the Responsive HTML code from the page for a canvas width and height of 700 px and 467 px:
<div id="layerslider_7" class="ls-wp-container fitvidsignore ls-fullwidth ls-container ls-responsive ls-device-is-desktop" style="width: 863px; height: 576px; margin: 0px auto; position: relative; visibility: visible;" data-layerslider-uid="LSwkerzzlm5">

The classes .ls-wrapper.ls-bg-outer and .ls-bg are also incorrectly set at 863px and 576px.

If the slider type in LayerSlider Slider Settings is then changed to Fixed Size the layerslider_X div values are altered to a width of 700px and height 467px, and the slider images are correctly displayed as required/specified in the canvas Settings.

This is the Fixed Size HTML code, again for a canvas width and height of 700 px and 467 px:
<div id="layerslider_7" class="ls-wp-container fitvidsignore ls-fullwidth ls-container ls-fixedsize ls-device-is-desktop" style="width: 700px; height: 467px; margin: 0px auto; position: relative; max-width: none; visibility: visible;" data-layerslider-uid="LS851ya40rt">

The classes .ls-wrapper.ls-bg-outer and .ls-bg are also now correctly set at 700px and 467px.

Setting the slider to Fixed Size is of course useless because the slider does not display properly on a phone or tablet.

Whilst we have found a CSS workaround to allow Responsive mode to display as it should, so I don’t need any further help, I think this issue needs reporting to your development team to have them investigate and discover whether it is LayerSlider and/or Enfold that is causing the problem, and hopefully effect a proper fix without having to resort to CSS overrides.