Everything about slider size

Your slider's size can change based on the responsive options you are using. Here you can see everything that could affect your slider's size.

Slider size

The slider size is the base size of your slider. By default this is the ratio your slider follows on any screen size.

Example
  • Slider size: 1200*700px

1920px wide screen - Slider size: 1920*1120px

2400px wide screen - Slider size: 2400*1400px

600px wide screen - Slider size: 600*350px

300px wide screen - Slider size: 300*175px

Custom slider sizes

When you are setting a custom Portrait/Landscape slider size, you are changing the slider's size on the given Desktop, Tablet or Mobile mode. The responsive behavior will be the same as before, you are just changing the base slider size for these modes.

Example
  • Slider size: 1200*700px
  • Tablet Portrait size: 800*450px
  • Mobile Landscape size: 740*400px

1920px wide screen (Desktop) - Slider size: 1920*1120px

2400px wide screen (Desktop) - Slider size: 2400*1400px

600px wide screen (Tablet Portait) - Slider size: 600*337.5px

400px wide screen (Tablet Portait) - Slider size: 400*225px

400px wide screen (Mobile Landscape) - Slider size: 400*216.22px

370px wide screen (Mobile Landscape) - Slider size: 370*200px

The given widths are not the breakpoints of your sliders! You can read all about breakpoints in here.

Responsive mode

Responsive mode can limit down the width and height of the slider's previously shown behavior.

Example 1
  • Slider size: 1200*700px
  • Auto responsive mode
  • Upscale off

1920px wide screen - Slider size: 1200*700px

1400px wide screen - Slider size: 1200*700px

1000px wide screen - Slider size: 1000*583.33px

600px wide screen - Slider size: 600*350px

300px wide screen - Slider size: 300*175px

Example 2
  • Slider size: 1200*700px
  • Auto or Fullwidth responsive mode
  • Min slider height: 400px
  • Max slider height: 1000px

2400px wide screen - Slider size: 2400*1000px

1920px wide screen - Slider size: 1920*1000px

1400px wide screen - Slider size: 1400*816.67px

1000px wide screen - Slider size: 1000*583.33px

600px wide screen - Slider size: 600*400px

300px wide screen - Slider size: 300*400px

Content editing mode

When content editing mode is used, then your slide's minimum size is based on your layers, margins and paddings and all your slides will have the height of your highest slide. This has the highest priority, so even if you are using maximum height, the height will grow bigger if the layers need it.

Example 1
  • Slider size: 1200*700px
  • Auto or Fullwidth responsive mode
  • You have one content mode layer with 500px fix height

1920px wide screen - Slider size: 1920*1120px

2400px wide screen - Slider size: 2400*1400px

1000px wide screen - Slider size: 1000*583.33px

600px wide screen - Slider size: 600*500px

300px wide screen - Slider size: 300*500px

Example 2
  • Slider size: 1200*700px
  • Auto or Fullwidth responsive mode
  • Max slider height: 800px
  • You have one content mode layer with 1000px fix height
1920px wide screen - Slider size: 1920*1000px
1400px wide screen - Slider size: 1400*1000px
600px wide screen - Slider size: 600*1000px
300px wide screen - Slider size: 300*1000px