Gofilord Gofilord - 4 months ago 7
CSS Question

White Gap On Side Of Page In Mobile

I have a website with a slick.js carousel in it. I have noticed a white gap on the side of the page when the website is viewed on devices with screens smaller than about 770px.

The white gap is on the right side.

After some testing I noticed that if I remove slick.js from the website, the white gap disappears.

At first, I thought the content of slides was causing it, but I reduced each slide to just a couple of words and there is still a white gap.

Here's the HTML:

<div class="m-carousel" dir="rtl">
<div class="slide">Test Slide</div>
<div class="slide">Test Slide</div>
<div class="slide">Test Slide</div>
<div class="slide">Test Slide</div>
</div>


And the Javascript (after page load):

$('.m-carousel').slick({
dots: true,
rtl: true
});


The CSS (regarding the slider):

// slick slider styling
.slick-dots li button:before {
font-size: 9px;
}

.slick-dots li.slick-active button:before {
color: accent;
}


On mobile, the page moves from side to side (when it's not suppose to), revealing and hiding that gap. It's really annoying.

I have tried setting
overflow-x: hidden
to the body, but it causes many problems with the navigation and overall scrolling of the website.

Answer

It took me a lot of time to figure it out but I finally did.
The problem was the arrows. It seems like when you put bootstrap and slick.js together, on a screen width below 767px, there are no arrows and there is a white unexplained gap.

To fix the problem, all I had to do was disable the arrows in the javascript:

$('.m-carousel').slick({
  arrows: false
});

You can see a demo showing the white gap here.

Thanks a lot to NominalAeon for the continuous help and support.