Carousel Doesn't Load on Mobile


#1

Hello, I have areview theme, and the carousel does not load correctly on a mobile device (chrome or safari). When the page initially loads, the carousel is extremely long, pictures never load, and I have to scroll multiple times to get to the top of the posts. See examples here.


If I rotate the phone to landscape and then back to portrait, it corrects the issue. See image here- this is after rotating.
I would like to get it to load correctly on the initial page launch, without rotating the phone. Users are likely not rotating the phone and they leave the site because they don’t realize how far down they have to scroll.
Thanks!


#2

Hello @katiesiemer,

I’ve just checked your site on Android phone and carousel worked well.

Which device and browser do you use?

Kind Regards, Roman.


#3

I’m on an iPhone. I tried on chrome and safari.


#4

Hello @katiesiemer,

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

@media screen and (max-width: 600px) {
     .owl-carousel {
         transition: none;
         text-align: center;
     }
}

Kind Regards, Roman.


#5

That’s much better now after adding that CSS. Thanks so much!!


#6

Great! You are welcome @katiesiemer :slight_smile:

Kind Regards, Roman.