Sliders look different after the 3.5 update

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.

As an fallback solution after 3.5.0.7 you can enable the Legacy font scale option at Slider settings → Developer tab,  which affects those Absolute positioned layers only, that were created before the 3.4 update.

Layers are in wrong placements

We have deprecated PX+ values. PX+ meant, that your pixel value was based on the font size. As Adaptive fonts were deprecated too, your font sizes became bigger, which resulted in bigger pixel values as well. You should readjust your layers with these non-font based pixel values to resolve this problem. Your values are device specific, so you can adjust them differently on tablet and mobile views too.

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.

Loading spinner changed and its options disappeared

We have deprecated the loading animation spinner options, and it no longer can be changed. 

So it can only look the way it does:

If you want to hide it, you can use this CSS code:

ss3-loader{
   display:none!important; 
}

In WordPress if you don’t have a good place to put css codes, you could use a plugin like Simple CSS, which will create an option for you in the WP left admin menu’s Appearance -> Simple CSS.