Responsiveness advanced example - max width for every view

I will divide this example to three parts, to those three parts, which will affect the slider, where it should change.

1.) The first setting is the Global settings -> Maximum screen width. This option is looking at the width of the screen. This means, that if you have a slider, which is smaller, then the full width of your website, then it will change, when your website will go under these values, not when your slider's size will go under them. In this example these values will be given to it:

Desktop portrait
1200px
Tablet landscape
1000px
Tablet portrait
800px
Mobile landscape
600px
Mobile portrait
400px

2.) The second option we will use is the Slider settings -> Size. In here you can give a size to your slider for every view. Let's give the same values, as previously:

Landscape slider size
1400px
Slider size ( = portait) - width
1200px
Tablet landscape - width
1000px
Tablet portrait - width
800px
Mobile landscape - width
600px
Mobile portrait - width
400px

You should look at these values as "ratios", the slider won't be actually 1000px wide at tablet landscape view, because it will have tablet portrait view, when the 1.) will change it to tablet portrait view, so if for example your slider has only 50% of the width of your website, it will change to 500px (because of 2.)) when your website has 1000px width (because of 1.)).

3.) And the last part will be the Responsive mode -> Fullwidth options. To make it easier, change the Portrait or Landscape algorithm to Screen width only. This will make, that the 1.) options won't change between portrait and landscape views based on if the height is bigger, than the width, or the other way around, but they will change based on only the width of the screen in the order they are in 1.), until 1200px screen's width it's desktop landscape, under it it's desktop portrait, under 1000px screen's width tablet landscape, under 800px tablet portrait, etc.

Also turn off the Force full width option to still have your slider on a smaller width, than the width of your website, to make this example better.

Now give max width values to all views, here at the Responsive mode -> Fullwidth -> Slide width options. I will give 100px less to everything from what we previously used:

Landscape slider size
1300px
Slider size ( = portait) - width
1100px
Tablet landscape - width
900px
Tablet portrait - width
700px
Mobile landscape - width
500px
Mobile portrait - width
300px

Result.) Let's keep the example, where your slider will have 50% width of your website. Like that, now if you have your website at 1000px width, which will make it to be in tablet landscape view (because of 1.)), the slider will have 500px width (because of 2.)), which includes the background image of your slide, and the controls, but not the layers. The layers will be at 450px width (because of 3.)) = 1000px * 50% / 1000px * 900px = 1.) setting * example width of the slider based on screen size / 2.) setting * 3.) setting.

With 1000px website width:
1.) 1000px
2.) 1000px
3.) 900px

Then going smaller to 900px:
1.) 1000px
2.) 1000px
3.) 900px

And now the layers will start getting smaller too:
1.) 1000px
2.) 1000px
3.) 900px

Same way, you go smaller, and lastly you will reach the mobile portrait view, when the maximum slide width is still a little smaller, then the slider's width:
1.) 400px
2.) 400px
3.) 300px

Until you will reach that size, and then it's getting smaller with the slider:
1.) 400px
2.) 400px
3.) 300px

Now the important part: why is this good? Because there are templates, like Gantry, which are changing their responsivity at more points (usually three), and with this you could have for example a full width slider, where the layers could be in the middle, like the other contents of your page, and change them, where the template is switching to the other views, to make them also have a new width and position.