Sliders look different after the 3.5 update
In this article
Font sizes are too big on mobile
The possibility to turn off the adaptive sizing option is deprecated since 3.5. So from the 3.5 release every text behaves as adaptive, which means they keep a fix size on each device. As a result, the previously scaled up non-adaptive fonts can be too large on mobile.
To resolve font size problems, you should use the font resizer on tablet and mobile views.
The Adaptive sizing was enabled on the Content layer by default, so the Default positioned layers shouldn't be affected unless you disabled Adaptive.
The Absolute positioned layers didn't have Adaptive sizing enabled by default. However, Absolute positioned layers shouldn't be used to create content, so first you should move these layers to Default position. If you still have font sizing problems, use the Text scale option to adjust them.
Align option at Style tab doesn't work
From 3.5 we try to stay as close to Native CSS solutions as possible, and in native CSS, you can't align full width elements. (Since they're full width.) To be able to use the
Align option at the style tab, keep the following in mind:
- The full width option is stronger than the Align. As a result, at any layer, which has full width option the Align will only work if either:
- the full width option is disabled, or
- there's a Max width on the layer
The affected layers are: row, heading, button, image box.
- Some layers are handled as "auto width" layers. As a result, the Align will work on them immediately.
The affected layers: icon, circle counter and counter.
- The rest of the layers are handled as full width. This means the Align works if you set a Max with on the layer.
Aligned layers are too big
This is connected to the problem explained above. Previously when you selected an align option at the Style tab, it automatically set a max width for the element to be able to align it. Starting from 3.5 no layers get automatic max width, so if you want the aligns to keep working, you'll need to manually set the max width for the layers.
Columns don't look okay when wrap after is used
The proper way to use the Wrap after is to set how many columns you want in one line. For example, if with 4 columns you want 2 columns in one line, use Wrap After 2. If you want all columns to be in one line, use 0 at the Wrap after.
The wrap after can adjust the width of the column, so certain values can cause problems. Typical examples:
- Two column row with Wrap after 2 to place the columns in one line.
- Two column row with Wrap after 3.
In both cases the Wrap after should be 0 because all columns need to be in one line.
Full page sliders are taller than the page height
To avoid CLS problems the height of the browser can't negatively affect the slider height. In other words, if you make the slider size 1920x1080px the slider will be taller than the browser's viewport.
If you want your slider to always be full page make sure you don't set more than 900px height for it. Better yet, make the slider as high as your content needs, and let the full page layout make it fill the browser height.
Thumbnails aren't responsive
At the thumbnail settings we had a minimum thumbnail count option. This assured, that on smaller screens your thumbnails will get smaller too, to always see the given number of thumbnails. To avoid CLS problems, we had to deprecate this option.
Instead of it, we created the device specific width and height options, so you should use them to make your thumbnails responsive again:
Drag doesn't work everywhere
To make our slider as good for Google (and other search engines) as possible, texts will be selectable within the slides. So with your cursor you can drag over the non-textual parts, while over texts the given text will be selected.
On touch devices you will be able to swipe over texts too, so this only affects desktop computers.
If you want to avoid this and allow users to drag over any element, then with absolute positioning you could put down an Area layer and make it as big, as it has to be to cover the entire slide at any given responsive case. Put this layer on top of the layer list to make sure it is over all other elements. But you should note, that this can only work, if you really don't want any element to be touched on your slide, as this will cover everything. For example if you have buttons too, you couldn't click on them.