Responsive mode - Advanced responsivity

Global font size

There are three places, where you can choose font size, the first one is the Global font size, what you can find in the Edit Slider → under the Slider settings. You can add a font size for the Desktop, Tablet and Mobile view, which will be the bases of the font sizes.
responsive2
The second place, where you can give a font size is the Smart Slider’s Settings → either Global fonts, or your slider’s fonts (you can read about these in here, to see what is the difference).
font_size_2
The third place is in your slide editor, if you are using heading or paragraph items, they have an option to overwrite the second place’s font size.
font_size_3

Example video

Example

  • Smart Slider’s Settings → Responsive mode – Based on: Maximum screen width
  • Maximum screen width → Tablet: 1024px, Mobile: 300px

responsive_mode_2
Edit Slider → Global font size:

  • Desktop: 12px
  • Tablet: 20px
  • Mobile: 30px

responsive2
Smart Slider’s Settings → Global fonts → the used font → Size: 200%
example_size_1
Slide editor → Heading item → Font size: auto (not used)
font_size_3
Edit slider → Slider size – Width: 1000px, Height: 300px
slider_size_2
This way your slider will have these font sizes:

  • Screen size: 1920px → Font size: 12px*200%*1920px/1000px = 46.08px
  • Screen size: 1200px → Font size: 12px*200%*1200px/1000px = 28.8px
  • Screen size: 1025px → Font size: 12px*200%*1025px/1000px = 24.6px
  • Screen size: 1024px → Font size: 20px*200%*1024px/1000px = 40.96px
  • Screen size: 1000px → Font size: 20px*200%*1000px/1000px = 40px
  • Screen size: 500px → Font size: 20px*200%*500px/1000px = 20px
  • Screen size: 301px → Font size: 20px*200%*301px/1000px = 12.04px
  • Screen size: 300px → Font size: 30px*200%*300px/1000px = 18px
  • Screen size: 200px → Font size: 30px*200%*200px/1000px = 12px
  • Screen size: 150px → Font size: 30px*200%*150px/1000px = 9px

Slide editor

At every slide there are four views:
responsive8

  • All: shows all layers, which are on any of the views.
  • Desktop: shows all layers, which are in the desktops slide.
  • Tablet: shows all layers, which are in the tablets slide.
  • Mobile: shows all layers, which are in the mobiles slide.

The size of the views are the Slider size, which you gave in the Slider settings multiplied with your Slide editor ratios.

In the editor if you create a layer, then the deleting x button is only appearing in the All view.
responsive3
In the other views, there will be an other option, the layer hiding. It has an icon that looks like an eye.
responsive4
If you click on it, then that layer will be hidden in the chosen view. If you want to change that back, then you have to choose your layer in the Layer tab → Active layer, and it will be under Position. With this Show on option you can decide whether to show or hide the layers at certain views. Basically it’s the same as the eye icon with the option of showing the hidden layers.
responsive9

Reset positions to desktop

This button can change back the position of the selected layer on the current view into the same position as it is in the desktop view.

Separate changing options

  • Show/hide layer
  • Move layer
  • Resize layer

You can’t put different items into the same layers, and you can’t change the item settings separately, because it will change in every view. If you want to do that, then hide the layer and put an other into your slide, then hide the one you just created in the other views.

Widgets

In the Edit SliderWidgets there is an option too, to choose where to display them.
responsive6

Desktop mode options:

  • Always: the widget will be always displayed in the chosen views
  • on Hover: the widget will be displayed on hover in the chosen views, but you can’t hover on tablets or mobiles, so if you choose this option, and you turn on the Display on Mobile and Tablet, then you can only hover on the computer, when the screen’s width require the smaller slides.

      Example

      Desktop

      Here is how my slider looks like in desktop view:
      responsiveexample5

      And these are the layers in it:
      responsiveexample6

      This is the position of the “We hope you all will” texts layer:
      responsiveexample8

      Tablet

      In tablet there is still enough space to show everything, any we want kind of the same layout. The width of the layers are too small, and the text doesn’t fit in them, so after adding them new widths and a little adjusting of the position this is how it looks:
      responsiveexample1

      With the layers:
      responsiveexample2

      Here the position of the “We hope you all will” texts layer became this:
      responsiveexample9

      Mobile

      On mobile it has too much items on it, so beside an image and the youtube item the others are hidden:
      responsiveexample3

      And here is the layer view:
      responsiveexample4

      The Show on settings for the hidden layers:
      responsiveexample7

      HTML items and the HTML widget

      The HTML items, and HTML widget isn’t controlled by our slider, since they are custom codes, so only your code can make them responsive. The most important part is to don’t use pixel sizes in their codes, because if you give a fix size, it will always stay that big.

      HTML item

      Text

      The font size of the html item is coming from the Edit SliderGlobal font size, which is a responsive font size. If you want to change this font size to bigger or smaller, you should give the font size in percentages, because that way the responsive font size from our slider stays, and your percentage will scale it up or down. To change the font size you need a stronger css code, and this documentation can help you with that.
      HTML code:

      <span><div</span><span> </span><span>id</span><span>=</span><span>"mytext"</span><span>></span><span>
      My HTML element
      </span><span></div></span>
      		

      CSS code:

      <span>html </span><span>#mytext{</span><span>
      font</span><span>-</span><span>size</span><span>:</span><span>200</span><span>%;</span><span>
      </span><span>}</span>
      		
      Image

      You can adjust your image to the layer, which is responsive, so if you use percentages in here too, it will work, as the other items.
      HTML code:

      <span><img</span><span> </span><span>src</span><span>=</span><span>"xy.png"</span><span> </span><span>class</span><span>=</span><span>"myimage"</span><span> </span><span>/></span>
      		

      CSS code:

      <span>.</span><span>myimage</span><span>{</span><span>
      width</span><span>:</span><span>100</span><span>%;</span><span>
      height</span><span>:</span><span>auto</span><span>;</span><span>
      </span><span>}</span>
      		
      Input tag

      You can adjust your input tags too to the layer with percentages, the only difference from a simple div is, that these are bigger, than their containers, because of their features, so you need to add some extra css codes to remove the extra parts, and make them exactly as big as the layer is.
      HTML code:

      <span><input</span><span> </span><span>class</span><span>=</span><span>"myinput"</span><span>></span>
      		

      CSS code:

      <span>.</span><span>myinput</span><span>{</span><span>
      width</span><span>:</span><span>100</span><span>%;</span><span>
      display</span><span>:</span><span>block</span><span>;</span><span>
      </span><span>;</span><span>padding</span><span>:</span><span>0</span><span>;</span><span>
      border</span><span>-</span><span>width</span><span>:</span><span>0</span><span>;</span><span>
      </span><span>}</span>
      		

      HTML widget

      HTML elements

      It’s hard to adjust the HTML widgets, because these are positioned absolutely over the slider, and you can give only two values in the backend to position them, so their width isn’t affected by anything. You should give the third position to it so the left and right positions would be given too, which are positioned relatively to the slider:

      <span><style></span><span>
      </span><span>.</span><span>nextend</span><span>-</span><span>widget</span><span>-</span><span>html</span><span>{</span><span>
          right</span><span>:</span><span>0</span><span>;</span><span>
      </span><span>}</span><span>
      </span><span></style></span>
      		

      and with this code you can add the width of your html elements with percentage to adjust them to the slider.

      <span><div</span><span> </span><span>style</span><span>=</span><span>"</span><span>width</span><span>:</span><span>100</span><span>%;</span><span>text</span><span>-</span><span>align</span><span>:</span><span>center</span><span>;</span><span>"</span><span>></span><span>Some text</span><span></div></span><span>
      </span><span><img</span><span> </span><span>src</span><span>=</span><span>"xy.png"</span><span> </span><span>style</span><span>=</span><span>"</span><span>width</span><span>:</span><span>50</span><span>%;</span><span>margin</span><span>-</span><span>left</span><span>:</span><span>25</span><span>%;</span><span>"</span><span>/></span>
      		
      Text

      The text size is coming from the Edit SliderGlobal font size in here too, just like at the HTML item, so you should use percentages in here too, to make your text smaller or bigger.

      <span><div</span><span> </span><span>style</span><span>=</span><span>"</span><span>font</span><span>-</span><span>size</span><span>:</span><span>200</span><span>%;</span><span>"</span><span>></span><span>Some text</span><span></div></span>
      		

      Full page type slider

      In the Slider type: Full page type – Configure the Full page type slider has two extra options for the responsivity at the Scale to full. These options are making the layers to be affected differently based on the screen’s height.
      scaletofull

      It’s hard to make the full page type slider to look good in every screen with different ratios. The only “tricks” that could help is to always use a background image, and don’t use many layers and items, and don’t want to make them to be in exact positions all the time. If you check out our demo, we only use 2-3 layers in every slide, and made some to disappear on smaller screens.

      Responsive maximum slide width

      This option is available for the Full page type and the Simple type sliders. You can find this option in the Edit SliderType: Simple or Full page type – ConfigureResponsive maximum slide width.

      res_max_width

      It does that, if you set it to a lower value, like in this demo it’s 1120px, then the layers with their items will only get maximum that wide, while the background of the slider will strech out to 100%. Until that 1120px the slider’s height won’t change, only the background will get smaller, and when that point is reached, the slider will get smaller, as you can see at the basic responsivity. Here is an example with setting this value to 1000px, and the slider’s size is 1000px*100px:

      Responsive max width

      Different sliders for different devices

      Usually browser screens on computers aren’t resized to be very small, like a phone’s screen size, while people are browsing them, so you could just show different sliders on different devices, which could make your slider to look better in those devices. If you are using Joomla, you can find this option at your slider’s module, and if you are using WordPress, you can use a different shortcode to have this.