Slider settings - Size

The Size tab is located at the Slider settings page.

💡 Tip: The slider's size is affected by many things. Check this documentation if you aren't sure why your slider has the size it does.

Slider Size

Width, Height

They set size of the slider. Also, this will be the size you can edit it at the Slide Editor.

💡 Tip: Is your slider's height bigger from what you set? Check the common mistakes.

Hide on Pro

You can hide the slider on your enabled devices. Desktop, tablet and mobile are enabled by default.

Limit slide width

☝️ Note: This option is available at the Simple and Block types only.

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 difference.

Limit slide width off (left) and on (right)

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

☝️ Note: This section is available at the Carousel and Showcase slider types only! Learn about the available options at their documentation.

Breakpoints

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.

What makes 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.

☝️ Note: Enabling many breakpoints can overcomplicate your slide, making it hard to understand what's happening and why. We recommend carefully considering whether you actually need a new breakpoint before turning it on. For most layouts people create (approximately 99%) the default 3 breakpoints are just fine.

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.

Layout

Layouts define the size and responsive behavior of the slider on the frontend.

Learn more about the available layouts at their documentation: Boxed, Fullwidth, Fullpage Pro.

Custom Size Pro

⚠️ Warning: Setting the Custom Size for 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.

☝️ Note: You can increase the slider's size in Default editing mode by setting paddings to the Slide or Content layer.