Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #305414

    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?

    #305544

    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

    #305995

    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!

    #306062

    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

    #306199

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

    Kind regards

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Displaying another slider on mobile devices’ is closed to new replies.