All Collections
FAQ's and Troubleshooting
My slider module isn't responsive
My slider module isn't responsive

Sometimes the Slider module will require some adjustments in order to be 100% responsive.

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

This type of situations appear when you only use the Slider module to show images which are set as the background image for each slide. 

We can control its height using the Design Tab > Spacing > Custom Padding and setting any relative units such as % , vw , etc for the top and bottom padding properties.

The typical situations using the Slider module are:

  • Each of the Slides has content (Title, Content, Button)

  • Each of the Slides doesn't have any content

Each of the Slides has content (Title, Content, Button)

Out of the box, each Slide height is given by summing the heights of all inner elements such as the title, content and the button.

Beside those heights we also have the default top and bottom padding  of 16% .

All those values combined will result in the final height of Slider module. There are cases where we will need to either decrease the height or to increase it so that each background image shows as good as possible.

For example we have this Slider Module: 

Depending on the Background Image Size and the Background Image Position used, some parts of the background image may get hidden (because the original aspect ratio of the slider is different than the aspect ratio width / height of the background image).

To fix this we can use the Design Tab > Spacing > Custom Padding and add some extra top and bottom padding. Just remember to use values expressed in % or in vw .

In the example above example if we set the top and bottom padding to be 40% we will get the background image to show 100% of it's original size:

And the result will be:

Note: Slider module dimensions can be controlled like so:

  • width of the slider - based on the width of the Row which contains the Slider Module

  • height of the slider - using custom top and bottom padding values (recommended to be expressed in % or vw )

Each of the Slides doesn't have any content

As explained above, out of the box the height of the Slider module is set by summing the heights of inner elements such as Title, Content, Button and the default top and bottom padding which is set to be 16% .

This can be a problem if the Slider module doesn't have any content at all, except having an image set as a background image. By default we get this look:

If you want to show more details from the image, you can go to Design  > Spacing > Custom Padding and set the same value of 32% for padding-top and padding-bottom and the result will be:

The same thing applies when we are using a Fullwidth column, only this time the values for custom top / bottom padding will be 50% (because the Fullwidth has more width available than a the regular column / section).

Did this answer your question?