Responsive bootstrap carousel image producing scroll on mobile

0
votes

I'm trying to work with a responsive Bootstrap carousel, but for some reason, I seem to be getting a 'scroll' on mobile. Can someone please make a suggestion with this?

The link is here: https://mydigitalmidlands.co.uk/vogue-interiors.co.uk/

The slide images are set as backgrounds, and CSS is below:

.carousel-item {
    height: 100vh;
    min-height: 350px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

it seems to be the height property '100vh' which is the problem. if i lower this, we get a white border on the bottom.

is there any way to make the carousel slides responsive, without the scroll or white gap?

2
cssbootstrap-4carouselresponsive
There is a JS workaround, see update to my answer, but I don’t know if that is acceptable as the question is tagged css only. - A Haworth

2 Answers

0
votes

(For a Javascript workaround see bottom of answer)

It looks as though you are bumping up against the vh ‘fix’ which I believe is now implemented at least on iOS and Android.

That is they set the vh so it does not change when the user scrolls vertically as they were otherwise experiencing a jump effect when they scrolled and part of the browser bar at the top disappears as the viewport height then changed. I guess fixing it to a value so that it did not change even when the viewport changed was a sort of compromise.

The only way I Have got round it so far is to set the height a bit less than 100vh. I’ve been lazy and kept it like that for all sites so some see a taller footer than they otherwise would. Would be good to hear of a proper CSS way of doing it so those on

devices with variable vh get the footer without a line or so extra It uses CSS variavpbleswhite.

I realise this isn’t a full answer as it doesn’t give a perfect workaround, but it was too long for a comment.

Update: there is a Javascript workaround described in https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

After your height: 100vh Put another line

height: calc(var(--vh, 1vh) * 100);

And have this JS run on load (and on resize for if the user changes the device orientation

let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`)
0
votes

This may seem a little to easy and may not work for you but I had the exact same issue a few days ago and all I did was set the width to auto and it worked and the scrollbar was gone on smaller screens:

width: auto;