Adjust carousel on mobile with media query or custom class?

I Need Help
1

I’ve spent this afternoon searching this forum and elsewhere to try and find a solution to reducing the amount of white space above and below the carousel images when viewed on mobile.
I’ve tried creating a media query on .carousel-inner and adding as a style in the page header but couldn’t get it to work.
See image below. The carousel code added in additional css works fine at all other breakpoints except mobile and I’m wary of changing anything without checking first.

IMG_6758
IMG_67581290×2796 229 KB

.carousel-indicators li{ display:none; }
.carousel-caption { top: 100%; }
.carousel-inner { overflow: visible; }

.carousel-control-next {
position:absolute;
right: -25%;
}

.carousel-control-prev {
position:absolute;
left: -25%;
}

.carousel-item img {
height: 750px !important;
object-fit: contain;
/filter: drop-shadow(3px 3px 3px grey) !important;/
}

.no-carousel-shadow {
box-shadow: none !important;
}

.carousel-item img, .carousel-inner img {
box-shadow: none !important;
filter: none !important;
}

2

Do you have a live link we can take a look at to see what is happening? I’m not sure what is causing the white space, the carousel typically doesn’t show this addition space.

3

Thanks Norm. My client site is https://www.steveperfect.com/. The screenshot is taken when the home page is viewed on a mobile device. The flexyfoot2 is set to classic. The goal is to reduce the height of the container/whitespace top and bottom of the carousel image.

4

In the Blocs editor view your page at the smallest display size (top of screen center, mine is set to large for this example) and adjust the element padding (Bloc) to “none” as seen below as it is probably defaulted to large 100.

test
test3024×1964 435 KB

5

Thanks, but this was the first thing I checked. It’s set at 20px

Screenshot 2026-06-01 at 11.44.46
Screenshot 2026-06-01 at 11.44.462558×1320 454 KB

6

I’ve been looking at this issue again this evening.

I tried resolving by adding the following code to Project Header wrapped as a style

@media (max-width: 575px) {
.carousel-item img {
height: 200px;
width: 100%;
}
}
I’ve tried different height values but not seeing any change. Is the media query correct and in the right place?

7

This is what is breaking your carousel, you are forcing all images in the carousel to be a height of 750px. Maybe try max-height instead.

Or lower this value on the smaller breakpoints.


@media (max-width: 575px) {
    .carousel-item img {
        height: 300px !important;
    }
}

When I removed this css this on your website, that fixed the issue.

Also all of your images have white spacing at the top as well.

3-escape-from-the-city
3-escape-from-the-city1050×1050 469 KB

6-3-fighting-men-horton
6-3-fighting-men-horton1050×1050 159 KB

Which also contributes.

I hope that helps.

1 Like
8

Hi Norm, thanks. I’ll test both these suggestions again to work out the best solution. If my client is adding images with white space then that is of course another issue! Thanks for looking into.