Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • March 5, 2026 at 9:02 am #1495764
    oestersund

    Dear Team,

    I want to display one out of 2 two layers slider depending on the device. I tried the following code, but still both sliders are appearing on both devices. How to correct the code?

    Thanks a lot and best regards,
    Tilman

    /* 1. Laptop/Desktop: Slider 1 zeigen, Slider 2 ausblenden */
    @media only screen and (min-width: 768px) {
    #layerslider_1 { display: block !important; }
    #layerslider_25 { display: none !important; }
    }

    /* 2. Mobile (Handys/Tablets): Slider 2 zeigen, Slider 1 ausblenden */
    @media only screen and (max-width: 767px) {
    #layerslider_25 { display: none !important; }
    #layerslider_1 { display: block !important; }
    }

    March 6, 2026 at 6:46 am #1495807
    Ismael

    Hey Tilman,

    Thank you for the inquiry.

    We adjusted the css code a bit. 

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

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

    Let us know how it goes.

    Best regards,
    Ismael

    March 6, 2026 at 7:19 am #1495809
    oestersund

    Ismael, thank you very much. Unfortunately, both sliders are shown with this code, as well on laptop as on mobile.

    March 7, 2026 at 1:42 pm #1495833
    Mike

    Hi,
    Please link to your page so we can examine. Please ensure that you have cleared your browser cache, any cache plugins, and any server or CDN cache. Also note that if you have a css error above this css, such as a missing bracket, it will break any css that follows.

    Best regards,
    Mike

    March 7, 2026 at 1:50 pm #1495834
    oestersund

    Thx a lot MIke, pls find below

    Best regards Tilman

    March 7, 2026 at 2:36 pm #1495836
    Mike

    Hi,
    Thanks, I found that your IDs in the css were not correct, this is how I corrected it:

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

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

    Best regards,
    Mike

    March 7, 2026 at 3:50 pm #1495838
    oestersund

    ah cool, i took the IDs displayed in the Layer Slider overview, so where did you pick them from?

    March 7, 2026 at 3:53 pm #1495839
    oestersund

    PS: I know its a different topic , but do have you a solution for this one? another board member tried to help out, but so far no solution and no answer from the Kriesi team.

    italic font – why

    thx again for your great support Mike

    March 7, 2026 at 5:08 pm #1495840
    Mike

    Hi,
    I got the IDs from the page code using the Dev Tools
    When I check today “Alex” is not italic:
    qzVt2Se.md.png
    Please clear your cache and check.

    Best regards,
    Mike

    March 7, 2026 at 5:12 pm #1495841
    oestersund

    Hi Mike,
    you are rights, now it is fine here as well.
    I flushed the cache several times, but maybe the server response time was a little bit long.

    Cheers, thx again and best regards,
    Tilman

    March 7, 2026 at 8:54 pm #1495844
    Mike

    Hi,
    Glad that we could help, if you have further questions please open a new thread and we will try to help. Thanks for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Manage WP Layer slider appearance laptop mobile’ is closed to new replies.