Need Help With Carousel Image Responsive sizing Issue

Hi all, first time posting but have used BSS for a while and getting on OK with it. I have a question and I have been struggling to work it out. I drag the Carousel component in, add my images, made them responsive. They work and when viewed on mobile devices just fine, but I got I would say about a 20px variation in size of the slides, but I would rather get them all the same size. So I adjust the size of the slide, then the image to fit the slide and then the images go all out of proportion when viewed on anything other than desktop size.

I know I could use media queries, but this would be a pain. I know the issue is due to resizing but I just can't figure out why it would cause a issue. Any help is appreciated as I can't see a fix for it and my sanity is going lol. Thanks in advance for any help.


The thing you probably would do is equalize the dimensions of the slides. They really should be the same width and height so that the carousel isn't getting taller/shorter if the height keeps changing.

Go back to the original images and use an image editor like Photoshop or (which is free) to resize the images so they all have the same width that you want. Then if one or more of the images have different heights, either choose to add extra canvas space (make it look nice too) or reduce the canvas size so they all have the same height and look nice. This way you will have the same size for all images on each carousel resolution.


Thanks for your help, following your post it did work...kinda. I resized the images to the same width of 1280px, added them to the carousel slide. I adjusted the height by selecting slides, adjusting it to make it fit the image. Then as soon as I go mobile view, the carousel slide is double the height, so a lot of space at the bottom. I sorted it by adding a height to slides and media query, then it messes up on desktop view.

Thanks for your help, it just driving me mad as I don't remember this issue in earlier versions of Bootstrap Studio. Thanks again for your help.

You shouldn't adjust the height of the carousel, unless you want to deal with media queries. You should adjust the height of the images so they are equal, either add more height to the one that needs it with something that works with the image or remove the extra space from the ones that have more so that they are all the same size. Then you shouldn't need to change anything for the carousel it's self.