Responsive sliders

In order to make a slider responsive, you just have to check the "Responsive" option from the "General" sidebar panel.

It's not necessary to set the Width and/or Height to percentage values. If you set fixed values for Width and Height, those will represent the default size of the slider and, at the same time, the maximum width and height of the slider.

If you want the slider to take full width, you can set Width to 100%.

Responsive layers

If you want the inner layers to be responsive as well, you will need to set the layer's width and/or height to percentage values (e.g., 40%) instead of fixed values.

Also, the text size can be controlled using media queries:

@media (max-width:770px) {
    .advanced-slider .layer {
        font-size: 10px;

@media (max-width:480px) {
    .advanced-slider .layer {
        font-size: 8px;

However, in responsive design you shouldn’t necessarily make the text smaller, because you’re making it hard to read and the user will need to zoom-in. In my opinion, it’s better to just hide certain portions of the text and only leave some headline visible. Let’s say you have this text inside a layer:

<h2>Slide title</h2>
<p class="description">Some description for the current slide</p>

You could hide the description for smaller screens and have only the headline visible:

@media (max-width:480px) {
    .advanced-slider .description {
        display: none;

Responsive layers without media queries

A more automatic was to achieve responsive layers was presented by Todd of TSCADFX in his article. The solution suggested by Todd is to specify the font size in "vw" units, which will make the font scale relatively to the width of the browser window. Of course, the background of the layer will adjust automatically to fit the size of its content if the layer's width and/or height is left to 'auto'. The same can be done for images or other elements.

Responsive videos

The video you insert inside the slider, or any other HTML content, will not automatically be responsive. You will need to set its size to percentage values, like 100%, in order to make it so.

[slider_pro_video type="youtube" id="msIjWthwWwI" params="rel=1&showinfo=0" width="100%" height="100%"]

Also, you will need to make sure the video's container is responsive as well, so if you insert the video in a layer, make sure the layer's Width and Height options, from the layer's settings panel, are set to percentage values as well.

Have more questions? Submit a request


Article is closed for comments.
Powered by Zendesk