Support » Plugin: Carousel Slider Block for Gutenberg » Responsive problem

  • Resolved jackielaigle

    (@jackielaigle)


    Hello, I have a problem. I have 6 slides in the carousel, I configured it to have 3 slides at the same time and everything works perfectly on a computer.
    Unfortunately on a phone it doesn’t work in responsive despite the possible setting in the responsive area (I would like to have only one slide on the phone screens which are only 360px wide). Can you help me please?
    I thank you in advance
    Sincerely
    Jackie

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Virgildia

    (@virgildia)

    Hello @jackielaigle. Please help me understand the issue better. In the Responsive Settings do you have “Slides to show” set to 1? Please ensure it is set to 1. Have you tried testing with a greater screen width for responsive? Most mobile phones have a width of 480px or lower. The screen width of the mobile phone you are using might be greater than 360px. Please also let me know what mobile phone and browser you are using. A link to your website where your slide is would help too.

    • This reply was modified 9 months, 2 weeks ago by Virgildia.
    Thread Starter jackielaigle

    (@jackielaigle)

    Hello @virgildia Thank you for your reply. Yes I confirm I have set “Slides to show” to 1.
    I’m work on Local by Flywheel you can’ access to my site with this credentials:

    Url : nonchalant-cask.localsite.io
    User name : puzzle
    Password : whimsical

    The Url page ==> https://nonchalant-cask.localsite.io

    I use Google chrome + plugin “Simulateur téléphone mobile – test site responsive” for testing and simulate phone device. You can test directly on mobile phone to it’s the same problem.

    Thank you for your help if it’s possible

    Plugin Author Virgildia

    (@virgildia)

    @jackielaigle thanks for sharing. Your responsive breakpoint is set to 321px, not 360px. Please update that. However it looks like you are using a plugin/block for drop shadow boxes. The CSS from that plugin is causing issues with your site’s layout. It looks like the carousel is nested in div with class name .dropshadowboxes-container. This container is causing horizontal overflow on mobile. This is outside the scope/control of the Carousel Block. Try adding the following to your custom CSS to fix the issue:

    .dropshadowboxes-container {
     flex-direction: column;
    }

    Let me know if my solution works.

    • This reply was modified 9 months, 2 weeks ago by Virgildia.
    Thread Starter jackielaigle

    (@jackielaigle)

    @virgildia Thank you for your reply, It’s better 🙂
    Now the width is correct they’re just the number of slide who stay at 3.
    If it’s possible to have just 1 slide to show on mobile device, it will be perfect.
    Thanks for your help.
    Jackie

    Plugin Author Virgildia

    (@virgildia)

    @jackielaigle that’s great! I am adding the option to set number of slides in responsive, in the next plugin version. The plugin update will be available within a few days. In the meantime you can set extra carousel options following the Slick documentation https://kenwheeler.github.io/slick/. This will require custom JS.

    • This reply was modified 9 months, 2 weeks ago by Virgildia.
    Thread Starter jackielaigle

    (@jackielaigle)

    @virgildia Thank you very much for your help. You have made a great job with this plugin. thank for sharing your work 🙂

    Plugin Author Virgildia

    (@virgildia)

    @jackielaigle apologies for the delay. A new version of the plugin is available. You will see an option for “Slides to scroll at a time” in the Responsive Settings. You can set that to 1 to scroll 1 slide at a time on mobile.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Responsive problem’ is closed to new replies.