Reducing white space on media carousel

General Help
1

Hi, is there a way to reduce the white space below the media carousel or swap the text so it appears below the icon when on a mobile device?

We are seeing that there is massive blank space between the bottom of the icon and the arrows. This is only happening on a mobile device as its fine on desktop.

Even if i change the vertical alignment setting the white space just moves above instead

image
image548×909 52 KB

Thanks

2

Hi Robyn,

Are all your images the same height? I find that the carousel will size itself to the height of the highest image, and as a result, you get a lot of white space underneath images that are smaller. Outside of that, I haven’t found a way to reduce any margins or padding to reduce any white space that appears, I’m afraid.

Andy

3

Thanks for the reply, yeah all our images in the carousel are the same height. And also tried to add mobile versions of all images that are smaller in pixel sizes and it doesnt seem to make a difference.

4

Ah, OK. I’m not sure what else to suggest, I’m afraid. Sorry I couldn’t be more help.

5

As @andyontrack mentions it’ll likely be picking up the height of the largest item in the carousel, so it’s hard to figure it out from one screenshot.

Equally if you’re using SVG images in there that could be the source of the problem. Since SVG images don’t actually have a fixed width or height they can easily throw off component sizing.

If you want to DM me a link to your course I can take a proper look for you.

6

Hi, I think I have figured it out. Its not the images as these are all the same size and pngs so not using any svgs.

It seems to be because we have 1 slide in the carousel that has a lot more text than the other 3. So its taking the height of that one and keeping it the same for all the others, resulting in the large white space.

It would be good to have the option to move the text above or below the icon on a mobile view.

Thanks everyone for the suggestions :slight_smile: