Clever Geek Handbook

White break on the side of the page in mobile

I have a website with a slick.js carousel. I noticed a white gap on the side of the page when the website is viewed on devices with screens less than 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 space is gone.
At first I thought the content of the slides was causing it, but I have shrunk each slide by just a couple of words and there is still a white space.

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 Javascript (after page load):

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

CSS (relative to the slider):

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

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

On a mobile device, the page moves from side to side (when it doesn't), revealing and hiding that gap. This is very annoying.

I've tried setting overflow-x: hidden

for body, but it causes a lot of navigation and overall scrolling problems on the website.

+3


source to share


2 answers


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

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

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


You can see a demo showing the white space here .

Many thanks to NominalAeon for their continued help and support.

+3


source


I think your problem is overflowing. You may have been able to keep your arrows and change the overflow to hidden ones.



0


source






More articles:


All Articles