Master Slider Responsive Guideline

First of all, thank you for choosing to work with Master Slider.

Please read the following descriptions about Master Slider responsiveness design.

When creating a slider, there are some general tips and tricks to consider for your slider to display better in different sizes.

When adding a new layer, please notice the Layer position origin option.

Using this option, you can set the origin of layers offset.

For example, if you want to keep a layer in right side of the slide, you should set Layer position origin to Right-center and set OffsetX to 0.

Also it is important to set layer position origin to center (Top–center, Middle-center, Bottom-center) for Full-width sliders. (As the width of full-width slider is not a certain value).

Also for Full-screen slider it should be Middle-center. (Because neither width nor height are a certain value)

Generally, it is recommended that all the layers have the same Layer position origin value.

Also pay attention to the Resizable layer option.

Normally it is recommended that you keep this option turned on, so that the size of the layers can be changed in different screen sizes.

There is another important option below the  Resizable layer option, called Don’t change layer position when resizing browser which is turned off by default.

 Please notice that turning this option on, will cause the layer to keep its position in different screen sizes and may cause it to overlap on other layers.

You will need this option in special situations when responsiveness is not your priority.

Also please always set an appropriate width and height value for the image layers.

Following the above guidelines, almost always prevent the layer overlapping issue in different screen sizes.

Not readable or too small on mobile size.

If you follow the mentioned guideline, there shouldn’t be any particular problem for displaying slider in different sizes, but you may have a crowded slide and some small layers (especially text) in desktop size, which it may seems that some of your text layers are somehow small to be seen clearly.

The best solution for this issue is to use two different sliders, one is the regular one for desktop and other sizes and one for mobile size only, which you will apply new positions and styles for your layers.

Please read the following instructions for using this method.

Make a duplicate of your default slider (let’s call it desktop slider).

We will use the first slider (desktop slider) for the desktop view and the new duplicate slider (mobile slider) for the mobile view.

Set a Class name for each one, in the Slider custom class name and style box in the Slider Settings tab.

For example, set desktop-view for desktop sliderand mobile-view for mobile slider.

Apply these changes to the mobile slider:

Set the Slider width to 480px (It’s recommended).

Next, you need to re-arrange and possibly resize the layers. If you noticed that you don’t have enough vertical space, simply increase the Slider height.

Chances are that you need to resize the image and text layers.

For text layers, probably you need to decrease the Font size and set the Text align to center. Also it’s recommended to set the Width to something up to 450px.

For the image layers, just set the appropriate width and re-position them as you like.

Next, please set all the layers Layer position origin to Middle-center and for large layers set the Align to stage to Align horizontal center.

These are general principles and following them, you can have a perfect looking slider for mobile size.

The final step is to tell the sliders to show up in their appropriate screen size.

For the desktop slider, go to Slider Settings tab and set the following CSS snippet in the Slider custom styles box:

@media(max-width: 480px) {
      .desktop-view{
            display:none;
      }
 }

And for the mobile slider, set the following code in the same place:

.mobile-view{
      display:none;  /* With this line, the slider will not display in the preview panel  */
 }
 @media(max-width: 480px) {
      .mobile-view{
            display:block;
      }
 }

To be able to see the slide in the preview screen, just remove the code on line #2 temporarily.

Now, all you need to do is to use both slider in your page.

If you are not comfortable doing these steps, our support team will gladly assist you to achieve your design.

Just head over to the forums and start a new ticket, we are always looking forward to hear from you.

Please notice that we are constantly working on improving Master Slider and there will be tools and options available for separate screen size display of the sliders which will make your work much easier.

Please remember that your feedback is highly appreciated and will help us to improve our ability to provide you and other users of our products the best experience possible.