CODEWITHSUNDEEP
imagetwitter-bootstrapscrollcarousel
Noo
Noo

Reputation: 21

Bootstrap Carousel image height causes scroll bars on smaller screens

I'm very new to bootstrap, and programming in general so please be patient! I have literally spent hours trying to find a solution to my problem via here/google, and the time has come to ask for some help!

Basically, I am trying to make a website for displaying photos in a carousel. I want my site to be responsive so it works on smaller devices. All my original images are the same size/dimensions (2304 x 1728 so 4:3, probably too big) and use the img-responsive class.

It looks fine on a large screen, but when I try it on smaller laptop screens and tablets, the image height causes scrollbars to appear so you can't see the bottom of the image/caption. However, the image width is responsive and shrinks to fit without scrolling.

I am of the understanding that the carousel size is dictated by the image size, so the logical solution would be to make my image size smaller in height - but I need to maintain the aspect ratio, and smaller images didn't look so good. I also tried setting a fixed height as a style but it didn't work.

What is the ideal image size (in px) for a carousel which takes up most of a browser window (allowing for navbar/header/footer), and how do you make it so the height doesn't require scrollbars?

Many thanks in advance!

Upvotes: 2

Views: 1086

Answers (1)

WhiteLine
WhiteLine

Reputation: 1991

My answer may not be accepted by everyone , but I think the only flaw of bootstrap is precisely the Bootstrap Carousel

Can not be changed easily (since as you say you do not have much programming experience), and does not offer a lot of customization

So I think the best solution for your problem is Owlcarousel , offers hundreds of customization options

OWL Carousel

enter image description here

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

Upvotes: 1

Related Questions