Breakpoints

What are the breakpoints?

Breakpoints are the pixel values where Smart Slider changes to show a different layout. For example, you can use breakpoints to make the slider switch to tablet view below 1199px screen width.

Breakpoints in Smart Slider based on both the width and height of the browser where the slider displays. This helps making sure that the correct device view is loaded on tablet and mobile devices. A quick example: iPhone X has 375x812px viewport size, but most tablets have 768x1024px CSS resolution. If Smart Slider would only check the width, then turning the iPhone X to landscape orientation would make the tablet layout to show there. As a result, layers hidden on mobile would still show up.

Where can I change the breakpoints?

1

Local Breakpoints

You can set Local Breakpoints at every slider by visiting the Slider settings → Size tab.

These breakpoints affect the current slider only.

2

Global Breakpoints

You can set your Breakpoints globally at Global settings → General.

These breakpoints affect those sliders, where the Global breakpoints is turned on at Slider settings → Size.

How to change the breakpoints?

You can change the breakpoints by clicking on the edit icon before them, then just type the new value.

How do breakpoints work?

Let's see how the breakpoints work on a simple example! I created a slider which has 3 heading layers. Each layer shows up on a different device, and it's label is the name of this device.

The sample slider displays "Desktop" text on large screens

For this slider I'm using the default breakpoints:

Breakpoints for Portrait orientation

Breakpoints for Landscape orientation

We'll check this example slider on a couple of resolutions in Smart Slider's preview. While you're in the preview, the slider shows a State information, which explains why does the slider show the current layout. For example, checking the slider in an 1920x758px browser shows the Desktop version, because the Orientation is Landscape, and the Width is above 1200px.

Preview of the slider in a 1920x758px window

Let's see some examples!

1

1200x850px window

The slider displays the desktop layout on this size. Why? Because it's a landscape size (the width is larger than the height), and the width is greater than 1199px.

2

900x850px window

The slider displays the mobile layout on this size. Why? Because it's a landscape size (the width is larger than the height), and the width is not greater than 900px.

3

850x850px window

The slider displays the tablet layout on this size. Why? Because it's a portrait size (the width is smaller or equal to the height), and the width is larger than 700px, but smaller than 1199px.

4

600x850px window

The slider displays the mobile layout on this size. Why? Because it's a potrait size (the width is smaller or equal to the height), and the width is smaller than 700px.

5

812x375px window

The slider displays the mobile layout on this size. Why? Because it's a landscape size (the width is larger than the height), and the width is smaller than 900px.

Common issues

1

The layer/control which is hidden on tablet disappears then reappears when the screen gets smaller

This issue happens when you change the width of the browser, but not the height. Because your browser height remains the same, changing the width of it makes the browser window change between landscape and portrait orientations, which can result showing a layout made for different device.

We recommend using Chrome's device emulator to check your site on different devices.

If it's still not clear why does the slider display the hidden layers at certain screen size, enter the width and height of the browser to the preview and see the State report.

2

Mobile view appears a little bit within tablet view

By default the breakpoints at their Orientation, are using different Landscape and Portrait pixel values.

If you see the mobile view appearing a little bit between two tablet views, the orientation changed and that created your issue. To make the system clearer, you should just use the same pixel values for both Landscape and Portrait orientation, and that way only the width of the screen will matter about where the breakpoints will happen.