Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • March 9, 2018 at 7:22 pm #924675
    emanuelecocchiaro

    Hi, I tried every combination but nothing seems to work.
    I want my layerslider to look different from desktop to mobile, so i created 2 different layersliders, with these two slug “bibidesktop” and “bibimobile”. I removed all the codes I’ve tried before so that it’s clean for you to try. Please help, because everything i try seems like it doesn’t affect it at all.

    March 9, 2018 at 8:26 pm #924703
    Jordan Shannon

    Hey emanuelecocchiaro,

    What exactly did you attempt already? Did you use css in combination with custom classes and media-queries to show and hide the sliders appropriately.

    Best regards,

    Jordan Shannon

    March 9, 2018 at 8:34 pm #924713
    emanuelecocchiaro

    Yes but i couldn’t figure it out. Could you vive me an advice?

    March 9, 2018 at 9:04 pm #924726
    Kahil

    Create both sliders on the page. Set one to display only on desktop, and the other to only show on mobile.

    March 9, 2018 at 9:40 pm #924745
    Jordan Shannon

    Hi,

    What is the link to the admin? WP-admin or login didn’t work.
     

    Best regards,
    Jordan Shannon

    March 9, 2018 at 9:53 pm #924758
    emanuelecocchiaro

    Can u tell me how to set that please? I know how to hide the slider on mobile from the advanced slider setting but how do I set one to only display on mobile?

    March 12, 2018 at 9:40 pm #925724
    Basilis

    Hi,

    You would need to have a class, that will display only on mobile and add it to the element.
    Example is here

    Only display on mobile device

    Best regards,
    Basilis

    March 12, 2018 at 9:54 pm #925731
    emanuelecocchiaro

    Hi Basilis and thanks for your answer. Although I really did not understand which code I should copy and paste, can you be a little more specific please?

    March 12, 2018 at 10:25 pm #925751
    Jordan Shannon

    Hi,

    Essentially you want this:

    @media and screen (max-width: 767px) {
.bibimobile{
display:block!important;
}

.bibidesktop{
display:none!importantl
}}

@media and screen (min-width: 767px) {
.bibimobile{
display:none!important;
}

.bibidesktop{
display:block!importantl
}}

    Best regards,
    Jordan Shannon

    March 13, 2018 at 10:44 am #925987
    emanuelecocchiaro

    Hi Jordan, and thanks for your help. Unfortunately it didn’t work. this is why I open this tiket, because it seems like it just doesn’t responde to the class input you gave me. I pasted it but nothing changed, it’s like it doesn’t affect it at all. I don’t know exactly what to try. What do you suggest?

    March 13, 2018 at 11:38 am #926019
    Mike

    Hi,
    I changed your code to this and it seems to be working now, please check.

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

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

    Best regards,
    Mike

    March 13, 2018 at 11:45 am #926026
    emanuelecocchiaro

    finally worked! thanks a lot!

    March 13, 2018 at 2:57 pm #926104
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    and the video tutorials here
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Showing different layer slider on desktop and mobile’ is closed to new replies.