Why doesn't my slider have the same breakpoints in the backend and frontend?


In the backend slide editor if you look at the breakpoints, where your slider switches from desktop to tablet mode, then from tablet to mobile:

by default the Default width percentage values are used from the Global settings.

For example if you have the 70% and 50% values as in the image, your Slider size - width value is 1200px, then the slide switches in the backend editor to tablet view at 840px and to mobile view at 600px.

If you use the custom slider sizes for the tablet and mobile views (and desktop landscape), then those will be the breakpoints to these views.

When both landscape and portrait views are used, there are cases when two views could happen in the backend at the same width, for example with my settings at 600px width the tablet portrait and the mobile landscape view could happen too. In the frontend this couldn't happen, because the landscape/portrait orientation is deciding which one could happen, but in the backend you are only editing based on the width.


In the frontend the  Maximum screen width values are the breakpoints, where your slider switches between views.

Summed up

This is happening like this, because the breakpoints in the frontend are happening based on the browser's size, while in the backend it is based on the slider size. You don't necessarily have a fullwidth slider, so the editor was made to give you an idea how your layers behave on smaller/bigger screens, not to give you exact result.
But if you want your backend editor to have the same width breakpoints as the frontend does, then use the same values at the Maximum screen width and at your custom slider sizes for landscape and portrait views. We wouldn't suggest turning on all custom sizes, because in most cases you don't really need them, but only these ones to have a nice responsive slider: tablet portrait, mobile portrait, mobile landscape. The Slider size should be equal to the Desktop portrait size.