Responsive mode - Basic responsivity

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.

responsive11
These options will look at your Slider size and use the given numbers to calculate the width and the height of the slider.
Responsive mode

Layers

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.

Widgets

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.

Advanced responsivity

Video Tutorial


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.

responsive_mode
Important note:
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.
responsive7

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
image_item
and at the background images.
device_specific_images_background
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.