Search code examples
phpwordpressowl-carousel

Owl Carousel responsive not working only desktop?


hi guys on my site https://www.woohwho.com/services/b2b-accountancy-ltd/ my owl carousel is working for a desktop but for some reason on mobile it ignores it and just puts all items in one slide and i'm not sure why,

he is the owl carousel code i'm using:

$('#owl-one').owlCarousel({
            items: 1,
            loop:true,
            margin:5,
            nav:true,
            navText:["<div class='nav-btn prev-slide'></div>","<div class='nav-btn next-slide'></div>"],
            autoPlay: true,
            responsiveClass: true,
            responsive:{
              0:{
                  items:1
              },
              600:{
                  items:1
              },
              1000:{
                  items:1
              }
            }
        });

Solution

  • On inspecting your page and CSS, it says you have added the following CSS style on the .owl-item class:

    @media (max-width: 768px)
    .owl-item {
        min-width: 100%;
    }
    

    Removing/disabling this style solves the issue. Any reason for adding this style? If this was for some other page, make sure to add styles by .page-id-9 .owl-item for example for a specific page with id 9.