Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • June 1, 2018 at 8:07 pm #965541
    promisecenterchurch

    Hello gurus!!

    https://www.staging1.thepromisecenter.com

    We have created 2 advanced layer sliders (Sneak Peak). The top one to display on desktop, the other to display on mobile.

    How do I stop the entire layer slider (I believe #3) from displaying on the desktop?

    Thanks,

    Terry

    June 1, 2018 at 8:37 pm #965553
    Jordan Shannon

    Hey promisecenterchurch,

    You want to hide the one labeled “new here”? First whichever one you want to hide, please add a custom class to the one you want to hide:

    Advanced layout builder

    Best regards,
    Jordan Shannon

    June 1, 2018 at 8:53 pm #965559
    promisecenterchurch

    Jordan,

    We are using the LayerSlider WP that is included within the Enfold template.

    I want to hide the “Take a Sneak Peak” Advanced Layer Slider (the 3rd layer slider from the top) only on desktops, but have it display on mobile.

    I cannot find a place to add a “custom class” by that name.

    It does have a “slider class name” I can use that may help. I have added “sneakmobile” as name.

    What CSS would hide the entire layer slider, not just its contents. on desktop?

    Thanks,

    Terry

    June 1, 2018 at 9:45 pm #965574
    Jordan Shannon

    Hi,

    Thanks for clarifying. Try adding this to quick css:

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

    Best regards,
    Jordan Shannon

    June 2, 2018 at 12:13 am #965608
    promisecenterchurch

    Jordan,

    I’m confused! The above worked perfectly on the staging site whose link I initially sent.

    I’ve now configured our production site the same way, but it is not hiding the slider!

    Home

    Note: the one I want to hide is #26 (the lower Sneak Peak with the larger image).

    Any ideas?

    June 2, 2018 at 11:38 am #965781
    Mike

    Hi,
    I wanted to try to assist, but I don’t see the slider with the “Sneak Peak”, please include a screenshot of the one you which to hide.
    I done note that your layerslider ID’s go from #1 to #11 on your homepage.

    Best regards,
    Mike

    June 3, 2018 at 1:10 am #965990
    promisecenterchurch

    Mike,

    I started all over again.

    Look at https://www.thepromisecenter.com.

    On desktop only one “Take a sneak peek” advanced layer slider should display. Instead both display.

    The top one with smaller text is to display only on desktop, but not mobile (that is working properly).

    The bottom “take a sneak peek” layer slider with larger text is to display only on mobile, but not desktop.

    I’ve tried

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

    Suggestions?

    Thanks

    June 3, 2018 at 1:35 am #965994
    promisecenterchurch

    I think it is fixed.

    Had to go into Cloudflare CDN and purge everything from that site.

    Seems to be OK now.

    June 3, 2018 at 2:51 am #966014
    Jordan Shannon

    Hi,

    Great! I’m glad this was able to get this corrected. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Hiding advanced layer slider on desktop’ is closed to new replies.