Home>Support>Metaslider for mobile

Metaslider for mobile

By wattech, 10 years ago. Last reply by Andrew Misplon, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

how to add one slider for mobile (smaller) and keep the regular one (desktop) fonctionnal
thanks in advance

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Hi Wattech

    Try the following under Appearance > Custom CSS:

    .video-desktop { display: none; }

@media (min-width:680px) {

.video-desktop { display: block; }

}

.video-mobile { display: none; }

@media (max-width:680px) {

.video-mobile { display: block; }

}

    And the following in your page in the Text tab or in Page Builder in a Visual Editor widget in it’s Text tab:

    <div class="video-desktop">
[metaslider id=18]
</div>

<div class="video-mobile">
[metaslider id=1123]
</div>

    To get it working right away just swap my shortcodes out for yours. Under Appearance > Custom CSS hopefully those breakpoints make sense to you, make adjustments there as required.

    Hope that helps :)

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More