Slider settings - Slider size

You can find the Size tab in here.

Check out the first video  from here to know, which responsive settings you need to use! Usually randomly turning on options on this tab only makes confusion, so that video (and maybe the others too) could really save a lot of your time, as it is much clearer to see what's happening there.

Our slider's responsiveness is based on that everything is getting smaller together as the screen gets smaller as you can see it at the basic responsiveness. However, this can make the sliders really small, also if you set up a correct slider size for mobile portrait view, in mobile landscape view that might look too big. So we made an option for all of them, desktop portrait and landscape, tablet portrait and landscape, and mobile portrait and landscape. You can change the whole slider's size for any of them, and change the position and size of your layers on them, or you can also hide the layers on them.

The definition of landscape view is that the screen's width is bigger, than it's height, and portrait view is, when the screen's height is bigger, than it's width.

These options can be found in here. If you turn on any of the portrait options, the Default width percentage from the Global settings won't be used anymore. These layouts will change at that point where the screen's size reaches its given widths, so these won't change at the Maximum screen widths, but they will use the Based on settings, if it is only real device detection or not.

Every layer will follow its (portrait) desktop position and size, until you change their positions or sizes in the other views.

If you change their positions or sizes, but you change your mind, and you want it to use the desktop layout, click on the Reset position button in the Layer tab.

Slider size
  • Width, Height - The size of the slider. If you use Desktop landscape size, then this will become the portrait view of the slider.
  • Min. font size - By default the fonts get smaller with the slider, but you can give a minimum font size and this way they can't go illegibly small.
If you are using Content mode your slider's height depends on the size of your tallest slide. This means the height setting can be overwritten by the content you added and in this case you can only reduce the slider's height if you remove layers or reduce the margins and paddings you set.
Landscape size Expert

Turn this option on to give different slider size and different layer layout for landscape and portrait view. The Slider size will become the portrait size of your slider. Since most desktops are landscape oriented, this will be the size your slider is shown.

  • Width, Height - The size of the slider, while you are looking at it with landscape view.
  • Min. font size - By default the fonts get smaller with the slider, but you can give a minimum font size, so they wouldn't go illegibly small. 
Slider size - Tablet, Mobile Expert

You can turn on the landscape and portrait size for the tablet and mobile device views too, to make different layouts for them.

How big device specific slider sizes should I set?

Choosing a size that matches one of the most popular device's CSS resolution would be a good choice. For instance, you could use the most common iPad's size (768x1024px) for tablet and iPhone 6's size (375x667px) for mobile. When selecting a device specific slider size always make sure to use a size for tablet, that's

  • smaller than the desktop size
  • bigger than the mobile size

For mobile, you should select a size, that is

  • smaller than the desktop size
  • smaller than the tablet size
Show on devices

You can choose what device you want your slider to show up on. This way you can for example create different sliders for different devices by creating those three sliders, publish them into the same place, and choose them to show up only on Desktop, Tablet or Mobile devices. (This option is always using real device detection, the Global settings - Responsive mode doesn't matter here.)


You can give margin to the slider.

Responsive mode

The responsive mode is defining how big your slider will be based on the space, where you put it. Check out their documentations in here to know what they do to your slider.