Slider settings - Slider size - Responsive mode - Fullwidth

You can find the Size tab in here.


Your slider will have 100% width, and auto height based on the given slider size.


Responsive - Full width

Slider height

Minimum height for your slider not to let it go too small and Maximum height not to let it go too big. These values are based on the slider's size, so for example if you want to have 500px minimum height, that is: 500 / slider height * slider width

If you're using these settings, the slider and canvas size will differ after a given size. This means the layers won't be able to cover the whole slider area anymore!

Layers are placed inside the slide canvas, so if you put a layer to be at the bottom of the slide canvas, then use minimum slider height feature, the slide canvas height and slider height might not be the same under every responsive scenario.


Slider size: 1200x500px. The slide canvas is marked with the dark area layer, and the heading layer is positioned to the bottom of it.

840px slider width without minimum height 840px slider width with 500px minimum height
Force full width

Originally your slider can be only as wide as the container it is in, but with this option you can force it to go outside its containers, and make it as wide as your screen is. This option has limitations, so it won't work in every case, and you will have to put your slider into your template or theme.

Horizontal mask
The slider puts overflow-x: hidden on the body or the HTML tag of your site to avoid vertical scrollbars appearing during certain animations.
Adjust slider width to parent selector

You can specify the CSS selector of one of the slider's parent elements and the slider tries to have the width of this element instead of the browser window's.

Slide width

Maximum width not to let your slides to go too wide. (This will only restrain the width of the layers, but the background image will still stretch out to 100% width.) You can also choose to give a different maximum width for tablet and mobile views. If you choose to give them, then the Remove vertical margin option will change the slider's size for tablet and mobile views, to make it have it's original ratio. This option is good for you if you want to keep your layers in sync with your theme's breakpoints. Otherwise, you should leave it disabled.

Demo sliders

Would you like to see some example on how the Full width responsive mode is working on real sliders? Check out these demo sliders: