Bootstrap carousel not collapsing well  Hi, the slideshow on this page looks good in desktop, and ok in tablet, but not good in mobile.

I'm not sure what the problem is, can you help?

Melody ScottAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Jessica WhitleySoftware DeveloperCommented:
Most webpages will stop the interval switches of images in the carousel when the page goes into mobile phone sizing.
Use the carousel pause feature and select which image should be seen in mobile phone view.

/* for portrait and landscape*/
@media screen and (deice-width: 320px) and (device-height:640px){
.carousel('pause')////including the rest of the data you are choosing
//also add data-slide to be display none.

I would also make the height of my image slightly larger in mobile view. all of your other div areas are similar sized and to continue consistency you should maintain that with the carousel image area.
Melody ScottAuthor Commented:
Thanks- will look at this, I appreciate your help!
Melody ScottAuthor Commented:
Hi, again. I think I'd rather have it work like this one:

The image and text get smaller but it displays properly.

Attached is a screenshot of what I see on mobile for my site. It just seems that it isn't shrinking properly. Thanks!

Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Melody ScottAuthor Commented:
After a bit of testing, I realized that it is because I forced the caption down via CSS. I'll work on that, and if I can't make it right, I'll probably use the static photo you suggest. I may need more help, so will leave the question open. Thanks.
Melody ScottAuthor Commented:
HI, I need more help with this. I think what I'd really like when it goes to mobile is:

1. The carousel indicators go away
2. The H3 text gets smaller and doesn't wrap.

Can I get help with this? Should I accept the answer I you gave and ask a new question?

Jessica WhitleySoftware DeveloperCommented:
This is still accomplished with the media query. You can make the carousel indicators hidden and the h3 text h4 or h5 even by using ids(that is what I would recommend so you have better control over the different specific areas of text and images).

For a better understanding of how to obtain some of this I would ask a pointed question about media queries or look at the examples offered by bootstrap itself
for the carousel.
Melody ScottAuthor Commented:
ok.. I guess that is my question. I am using bootstrap exactly as recommended, and it is not working.


1. Could you take a look and help me figure out why?
2. Or, could you help me out with an example media query, if that's what's needed?

RobOwner (Aidellio)Commented:
in your styles.css, there's too much that you're doing to the carousel.  

comment it out:

.carousel-inner > .item > img, .carousel-inner > .item > a > img {
/*   width: 100%; */

.carousel-indicators {
/*     bottom: 10px; */

.carousel-caption {
/*     left: 20%; */
/*     right: 20%; */

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Melody ScottAuthor Commented:
That's definitely better, thanks! It isn't showing the whole image, though, only about a third of each image. So the image isn't shrinking, I'll see if I can discover why, but if you have a look too, I'd appreciate it!
RobOwner (Aidellio)Commented:
If you make the carousel bigger, height wise, you should see more of the image. Have you done that?
Melody ScottAuthor Commented:
I did do it, but earlier, not since a few days ago. OK, I see that is probably the issue, thanks.
RobOwner (Aidellio)Commented:
If you want to see the entire image then the carousel needs to have a min-height corresponding to the height of the image.  As you've got the css to have the image to take up 100% width, this should display the image correctly.
RobOwner (Aidellio)Commented:
Actually I need to correct my last comment.  It just has to be in the same ratio to the width.  But you may find that the min-height for mobile devices is 150px etc.  Just test and see.
Melody ScottAuthor Commented:
Thanks, Rob!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.