How to change the aspect-ratio of the Gallery Slider for each breakpoint

In the Slider settings, we can set an aspect ratio for the images.
Unfortunately, there is no option to change it for different breakpoint.

But the good thing is that the slider uses a CSS variable to control the aspect ratio, which makes it easy to change.

slider-aspect-ratio-option

Step 1

Select your slider, go to the Custom CSS and select the breakpoint where you want to modify the aspect ratio:

custom-css-breakpoint-option

Step 2

Paste the following CSS code.

Note that the calc is the formula to have a 16/9 aspect ratio

%%SELECTOR%% { --ratioSlider:calc(9 / 16 * 100%) }

So if we want to have a 9/16 instead, we set it like this:

--ratioSlider : calc(16 / 9 * 100%)

If we want it to be a square (1/1 aspect-ratio), we just need to set it like this:

--ratioSlider : 100%

custom-css-slider-aspect-ratio

Here is an example with a slider having 3 different aspect-ratios:

  • 16/9 by default

  • 1/1 in Phone Landscape mode

  • 9/16 in Phone Portrait mode