Reduce whitespace of carousel on mobile?

I Need Help
1

I’ve been trying to reposition the carousel on this site [https://www.steveperfect.com/] because when viewing on mobile there is currently too much white space above and below. see pic below.
Thought it was a justify content thing so I’ve just tried adding this to the code editor but the desktop view disappears.

@media screen and (max-width: 576px) {
.volt-gallery {
display: flex;
justify-content: top;
flex-flow: row wrap;
}
}

but the actual goal is to reduce the amount of white space. So I’m wondering if keeping it centred but setting a max height of the carousel or container is the way to go but I’m not sure which class handles that.

IMG_3698
IMG_36981290×2796 76.6 KB

2

It’s not simply down to the padding being a large size on that particular breakpoint, is it?
That’s normally my first thing to check when similar scenarios hit me.

3

Thanks but nope. I thought that at first too but padding is 20px and the centering is happening within the Volt Gallery

4

As it is all dependent on Bootstrap carousel can anyone confirm what I need to change.
e.g would it be setting a max-height or height on carousel-inner?