Owl carousel not showing on mobile

On this page, I use an Owl Carousel (bottom): https://www.parisaspersiankitchen.com/index.php
But for some reason, it does not show on mobile.

Here is the

Searching on Google did not enlighten me how to make it visible on mobile, so hopefully someone can help me out here, please? Maybe @PaulOB ?

It’ll be tomorrow before I can look at this on the computer and properly inspect the code.

I can see on mobile there is no carousel but there is miles of white space to the right of the layout which is probably related to the carousel.

Thanks @PaulOB
I have checked the Owl Carousel code again, and all seems fine.
So I guess somewhere there is a javascript conflict with another script?

I believe you have nested your media queries incorrectly as all the owl stage code is presented to screens of 992px and larger and nothing for smaller screens,

There are thousands of lines of code to look through and I have a very slow connection here so almost impossible for me to debug properly but it looks as though you have a missing closing bracket at around line 9724 in vendor.js (as seen in developer tools (this may not correspond to actual lines of css)).

The 992px media query isn’t closed properly and so encompasses all other following code.

I believe there should be a closing bracket as shown here.


    .d-inline-flex {
        display: -ms-inline-flexbox!important;
        display: inline-flex!important
    }
} <!-- this closing bracket needs to be added -->

    @media (min-width: 576px) {
        .d-sm-none {
            display:none!important
        }

Add that bracket and re-test.

There is a danger that you may have already built code based on that error so fixing the error may throw other things off so you will need to test carefully.

When I add the bracket through developer tools the carousel works fine on small screen. Note you don;t need a mobile to test as the desktop screen is also broken at less than 992px width.

If you can’t correct that error then remove all the owl css and put it in a file of its own.

Amazing how one little “}” can mess it all up.
You nailed it, @PaulOB Many thanks!!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.