Responsive sliders

In order to make a slider responsive, you need to set the 'responsive' property to 'true'.

It's not necessary to set '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 the 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:720px) {
    .advanced-slider p {
        font-size: 10px;
    }
}

@media (max-width:480px) {
    .advanced-slider p {
        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 only have the headline visible:

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

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. 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 size is set to percentage values as well.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk