1. 8th Anniversary Sale Get 88% OFF Lifetime Pro Membership & access all 16+ premium Divi extensions: Divi Block, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed.Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color.
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Conflict between mobile and desktop sliders for Divi Wordpress

Discussion in 'Free Divi Community Forum' started by DGG1941, Jun 8, 2017.

  1. DGG1941

    DGG1941 New Member

    I have two separate image sliders, one for mobile and and one for desktop, using the Disable facility as appropriate.

    The first slider in my CMS is for a mobile and this loads on a mobile ok. But when the website is opened on a desktop, the first image from the mobile slider appears for about 1/5 of a second. It seems that the system grabs the first image it finds (image 1 from the mobile slider) and then realises that this module is disabled on a desktop and overwrites it with images from the desktop slider.

    Is there anyway of addressing this.
    www.gallowayphotography.uk.com
     
    #1 DGG1941, Jun 8, 2017
    1. PRO MEMBER PERKS Divi Ultimate Blog Plugin - Easily set awesome default design for your Divi single blog page:Learn More
  2. Wagner K.

    Wagner K. New Member

    You can try adding display: none; for the mobile slider. Then add custom CSS class for the mobile slider section.

    Then add the below extra CSS:

    Code:
    Log In or Sign Up to view this code.
     
    #2 Wagner K., Jun 8, 2017
  3. DGG1941

    DGG1941 New Member

    Thanks for the response Wagner K. Could I ask you to be a bit more specific - this stuff is not my forte! Where exactly would I add display: none.

    Thanks again
     
    #3 DGG1941, Jun 9, 2017
    1. PRO MEMBER PERKS Divi Block Pro - Premade team carousel design for your Divi site without using any plugins:View Demo
  4. Wagner K.

    Wagner K. New Member

    See the screenshot below for more details.
    *The section settings is for your mobile slider section.

    css.png

    css-2.png

    css-3.png
     
    #4 Wagner K., Jun 9, 2017
  5. DGG1941

    DGG1941 New Member

    Thanks Wagner G, that worked, although the Display: None; comment had to be removed as that turned off the slider altogether.
    Appreciates the help and the quick response!
     
    #5 DGG1941, Jun 10, 2017
    1. PRO MEMBER PERKS Divi Block Pro - Easy-to-use drag & drop interface to mix & match 456+ premade Divi blocks & export as json file:Learn More
  6. Wagner K.

    Wagner K. New Member

    I use the display: none; so that the slider is hidden altogether.
    But then I use custom CSS class to only show the slider on the mobile.

    But based on what you said, did you remove the display: none; and it works? Sound weird to me.
     
    #6 Wagner K., Jun 10, 2017
  7. Wagner K.

    Wagner K. New Member

    Ah.. I think I got what you mean by now.
    Are you saying that the section disappeared from the visual builder?

    To fix this, add the CSS below to your Theme Options -> Custom CSS
    Code:
    Log In or Sign Up to view this code.
     
    #7 Wagner K., Jun 10, 2017
    1. PRO MEMBER PERKS Divi Ultimate Footer Plugin - Custom global Divi footer (20 premade styles) + Revealing footer effect:Learn More
  8. DGG1941

    DGG1941 New Member

    Yes, I tried the display: none; and the slider did not show so I removed it. There is another issue however. When the mobile version opens, the first image is displayed offset to the right and down slightly, so you see it jump twice as it finds the correct place. Thereafter all images are displayed correctly.
    Thoughts on this would be appreciated as well!
    Thanks
    Www.gallowayphotography.uk.com
     
    #8 DGG1941, Jun 10, 2017
  9. Wagner K.

    Wagner K. New Member

    To fix the mobile issue, add the CSS below to your Theme Options -> Custom CSS.
    Code:
    Log In or Sign Up to view this code.
    That might solve it.
     
    #9 Wagner K., Jun 10, 2017
    1. PRO MEMBER PERKS Divi Block Pro - Powerful Divi header builder for you to mix & match premade header design, mobile menu & more:Learn More
(You must log in or sign up to post here.)