Responsive mode - Basic responsivity
In the Edit Slider → under Slider Settings you have two options to turn on Responsive mode:
- Down scale: this option will size down your slider, if the screen width is smaller, then the Slider size.
- Up scale: this will scale up your slider, if the screen is bigger, then the Slider size.
These options will look at your Slider size and use the given numbers to calculate the width and the height of the slider.
The layers have they positions, widths and heights given in percentige, and they can use these to adjust to any smaller or bigger container, than the fix size, and they will still have the same layout. These layers will resize the items in them too, if you don’t change the item sizes to fix values.
Every widget has a unique responsivity, independent from the other widgets, so if you want to use more together, then you should check out the widget variables to position them.
At your Settings you can choose what kind of responsive mode do you want on your sliders:
- Real device detection: it will only change the slider, if the user is watching it on tablet or mobile phone.
- Maximum screen width: you can add two width sizes, where you want your slider to change on a smaller screen.
- Combined: the two options together.
Maximum screen width option is only working, if at least one of your scale option is turned on at the Edit Slider → under Slider Settings.
Slide editor ratios
The Slide editor ratios doesn’t show the exact width of the tablet and the mobile view, because they don’t have fix widths, they just change at a fix width. The ratios are only to help you visualize a smaller width slider in your Slide editor.
Device specific images
This option will only work, if the Delayed load, or the Lazy load is turned on at your Edit Slider → under Slider Settings. You can turn on to show other images in other views, and you can also pick retina images for them. There will be an option for this at the image items
and at the background images.
With this only the current view’s image will load, so if you use Maximum screen width, and watch it on computer screen, where the browser is opened on a smaller width, it will load the mobile’s image, and it will stay that image, even if you put back the browser to full screen. This option is mostly for Real device detection, so the phones wouldn’t have to load big images, and for the retina images.
Note: the Resize slide backgrounds options doesn’t work, only with desktop background images.