Slider settings - Size
The Size tab is located at the Slider settings page.
They set size of the slider. Also, this will be the size you can edit it at the Slide Editor.
Hide on Pro
You can hide the slider on your enabled devices. Desktop, tablet and mobile are enabled by default.
Limit slide width
Limits the width of the slide and prevents the slider from getting too tall. By default it limits the width to the set slider width. Watch the Slider Settings video to see the differ
- Large desktop Pro You can set a custom slide width limitation for large desktop.
- Desktop You can set a custom slide width limitation for desktop.
- Large tablet Pro You can set a custom slide width limitation for large tablet.
- Tablet You can set a custom slide width limitation for tablet.
- Large mobile Pro You can set a custom slide width limitation for large mobile.
- Mobile You can set a custom slide width limitation for mobile.
For example, if you create a 1000x500px slider, then:
- with Limit slide width ON the slider will be 1920x500px on a fullHD monitor
- with Limit slide width OFF the slider will be 1920x960px on a fullHD monitor
Slide Size Pro
Breakpoints define when your slider switches to a different device. Smart Slider 3 uses CSS breakpoints, so it checks the browser width and not the actual device it is viewed.
Breakpoints even more precise is that Smart Slider 3 checks not only the width of the browser, but the height, too, so rotating your phone to landscape will still display a mobile layout. Here's an example on why orientations are so important. An iPhone X has a CSS resolution of 375x812px, and an iPad Pro 9.7" has a CSS resolution of 768x1024px. When only the width of the browser is taken into account, the iPhone X landscape view counts as a tablet (as it's larger than 768px, which is the most common tablet portrait width). By checking the height, too, iPhone X can be identified as a mobile device, so you can see the mobile layout of your slider, instead of the tablet one.
Breakpoints allow you to adjust your slide's layout perfectly. Using the Resizer you can check whether the default breakpoints are fine for your slider, and adjust them if necessary.
Layouts define the size and responsive behavior of the slider on the frontend.
Custom Size Pro
Custom Sizefor the slider properly is not easy at all, and this feature is not needed for most sliders.
You can use this option to change the aspect ratio for each device. For example, if you have an 1200x600px slider, by default it would be 375x187px on a 375px wide mobile. By setting a
Custom Size you can enlarge your slider to be, for example, 375x400px.