Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 17, 2014 at 11:20 am #305414
    slimmer1

    Hello,
    I saw in this tread https://kriesi.at/support/topic/can-i-turn-off-the-layer-slider-on-mobile/ there was a way to hide the layslider on mobile devices with this code:
    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {
    .avia-layerslider {
    display: none !important;
    }
    }
    Is there maybe a way to show another layerslider in stead? So on computer and tablets one layslider would be shown, and on mobilephones another layslider would be replacing. Is that possible?

    August 18, 2014 at 4:47 am #305544
    Ismael

    Hey slimmer1!

    Thank you for using Enfold.

    Please create two layer sliders, one for desktop and another for mobile. We’ll check it after. Usually, they will be identified as div#layerslider_1 and div#layerslider_2. So you need to hide the other layer slider on desktop then force it to show on mobile then hide the other one using media query. Something like this:

    @media only screen and (min-width: 768px) {
  div#layerslider_2 {
 display: none !important;
 }
}

@media only screen and (max-width: 767px) {
 div#layerslider_1 {
 display: none !important;
 }

div#layerslider_2 {
 display: block !important;
 }
}

    Place the layer slider for desktop on top of the second layer slider.

    Best regards,
    Ismael

    August 18, 2014 at 9:35 pm #305995
    slimmer1

    Hi Ismael,
    Thank you! I inserted the code in the quick css and took the number from the shortcode of the layersliders and inserted. I have a temporary slider for desktop with shortcode: [layerslider id=”11″] and one for mobile: [layerslider id=”9″]. I inserted the number in the code:
    @media only screen and (min-width: 768px) {
    div#layerslider_11 {
    display: none !important;
    }
    }

    @media only screen and (max-width: 767px) {
    div#layerslider_1 {
    display: none !important;
    }

    div#layerslider_11 {
    display: block !important;
    }
    }

    Is that the right way to do it? It didn’t work, I am maybe doing something wrong? is it the shortcode number I need to use?

    Kind regards and thanks!

    August 19, 2014 at 4:24 am #306062
    Ismael

    Hi!

    Thank you for using the theme.

    The id doesn’t depend on the layer slider shortcode id. Please let us take a look at the actual page with the sliders or use firebug to inspect the code and then look for the layer slider id.

    Cheers!
    Ismael

    August 19, 2014 at 11:30 am #306199
    slimmer1

    I figured it out! Thank you very much for your help!!

    Kind regards

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Displaying another slider on mobile devices’ is closed to new replies.