Bootstrap 4 Carousel Indicators and Controls dont stay in carousel div

[Gramrock]

Hey guys,

I have this problem where if i wrap the carousel inside a div with “position:absolute; height:100%;” I have what i want, the initial page fills the whole body entirely.

But if I scale the window horizontally, the carousel controls move out if the carousel div and stick to the very bottom.

If i however remove the wrapper with the “position:absolute; height:100%;” from the carousel div, the controls position correctly but the initial site isn’t fullscreen ( has to be scrolled vertically.

can someone explain to me how i can have the initial height set to 100% but don’t break the controls positioning ? (so i dont have to scroll to see the indicators).

Take a look here:

http://the-depth.com/test/

Appreciate u guys.

Sincerely. Gram

[Gramrock]

Got it !

had to add this to the css

.carousel-inner {
    position: relative;
    width: 100%;
    max-height:100vh;
    overflow: hidden;
}

.carousel-item{
    max-height:100vh;
    min-width: 100%;
}

[Author]

Posts