Bootstrap carousel not collapsing well

http://dev2.magickitchen.com/  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?

Thanks.
mel200Asked:
Who is Participating?
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.
0
mel200Author Commented:
Thanks- will look at this, I appreciate your help!
1
mel200Author Commented:
Hi, again. I think I'd rather have it work like this one: http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

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!

screenshot
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

mel200Author 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.
0
mel200Author 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?

Thanks.
0
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 http://getbootstrap.com/javascript/#carousel
for the carousel.
0
mel200Author Commented:
ok.. I guess that is my question. I am using bootstrap exactly as recommended, and it is not working.

So..

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?

Thanks,
0
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%; */
    padding-bottom:3.5%;
/*     right: 20%; */
}

Open in new window

0

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
mel200Author 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!
0
RobOwner (Aidellio)Commented:
If you make the carousel bigger, height wise, you should see more of the image. Have you done that?
0
mel200Author Commented:
I did do it, but earlier, not since a few days ago. OK, I see that is probably the issue, thanks.
0
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.
0
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.
0
mel200Author Commented:
Thanks, Rob!
0
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.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.