CODEWITHSUNDEEP
htmlcsstwitter-bootstrapmobilecarousel
mthomp81
mthomp81

Reputation: 63

Bootstrap Carousel Image size and placement issues with xs (mobile) devices

I know there's a lot of questions on here about Bootstrap Carousel image size issues, but I haven't found a solution to the problem I'm having. I'm honestly not sure where the problem stems, as this is my first time using Bootstrap.

I have a carousel that I plan to display eight different images, all of various widths and heights. For now, I have the height of the images at 500px or less, for test purposes. The carousel I have now looks... fair on my 1080p laptop. The position of the indicators are a bit off, though I don't know if that can be altered. The biggest problem I'm having right now is how it looks on a mobile device (I'm using an iPhone5c for testing.) I've set the style to each image style to "object-fit: cover; overflow: hidden;" and used the "img-responsive" class, yet, on mobile, the images do not resize for some reason. I really don't know where to start when it comes to fixing this Carousel.

Test page is here: http://mcthompson.info/suzaku/index.html

Here's the code that's uploaded right now that pertains to just the carousel. Any help would be appreciated:

HTML

        <div class="container" id='indexslide'>
        <div id="main_slide" class="carousel slide" data-ride='carousel'>
            <ol class="carousel-indicators">
                    <li class="item1 active"></li>
                    <li class="item2"></li>
                    <li class="item3"></li>
                    <li class="item4"></li>
                    <li class="item5"></li>
                    <li class="item6"></li>
                    <li class="item7"></li>
                    <li class="item8"></li>
                </ol>
                <!--slides-->
                <div class="carousel-inner" role="listbox" style="width:100%; height: 510px !important;">
                    <div class="item active">
                        <img src='babyhuck1.jpg' alt style="object-fit: cover; overflow: hidden;" class="img-responsive">
                    <div class="carousel-caption">
                        <h3>Baby Huck</h3>
                        <p>Demo text blah blah blah</p>
                    </div>
                </div>

                <div class="item">
                    <img src='bamboo1.jpg' alt style="object-fit: cover; overflow: hidden;">
                    <div class="carousel-caption">
                        <h3>Bamboo</h3>
                        <p>2 Demo text blah blah blah</p>
                    </div>
                </div>

                <div class="item">
                    <img src='magnolias1.jpg' alt style="object-fit: cover; overflow: hidden;">
                    <div class="carousel-caption">
                        <h3>Magnolias</h3>
                        <p>3 Demo text blah blah blah</p>
                    </div>
                </div>

                <div class="item">
                    <img src='peacock1.jpg' alt style="object-fit: cover; overflow: hidden;">
                    <div class="carousel-caption">
                        <h3>Peacock</h3>
                        <p>4 Demo text blah blah blah</p>
                    </div>
                </div>

                <div class="item">
                    <img src='maiko.jpg' alt style="object-fit: cover; overflow: hidden;">
                    <div class="carousel-caption">
                        <h3>Maiko</h3>
                        <p>5 Demo text blah blah blah</p>
                    </div>
                </div>

                <div class="item">
                    <img src='waterlillies.jpg' alt style="object-fit: cover; overflow: hidden;">
                    <div class="carousel-caption">
                        <h3>Water Lilies</h3>
                        <p>6 Demo text blah blah blah <a href=image3.JPG>CLICK</a></p>
                    </div>
                </div>

                <div class="item">
                    <img src='cityscape1a.jpg' style="object-fit: cover; overflow: hidden;" alt>
                    <div class="carousel-caption">
                        <h3>Cityscape 1</h3>
                        <p>7 Demo text blah blah blah</p>
                    </div>
                </div>

                <div class="item">
                    <img src='cosmos1.jpg' alt style="object-fit: cover; overflow: hidden;">
                    <div class="carousel-caption">
                        <h3>Cosmos 1</h3>
                        <p>8 Demo text blah blah blah</p>
                    </div>
                </div>
            </div>

                <a class="left carousel-control" href="#main_slide" role="button" data-slide='prev'>
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>

              <a class="right carousel-control" href="#main_slide" role="button" data-slide='next'>
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
              </a>
            </div>
        </div>
    </div>

CSS

.carousel-inner > .item > img {
    margin: 0 auto;
    max-width: none;
}

/* Mobile */
@media (min-width: 320px) {
    .slider-size {
        height: auto;
    }
    .slider-size > img {
         width: 80%;
    }
}

/* tablets */
@media (max-width: 991px) and (min-width: 768px) {
    .slider-size {
        height: auto;
    }
    .slider-size > img {
        width: 80%;
    }
}

/* laptops */
@media (min-width: 992px) {
    .slider-size {
        height: 200px;
    }
    .slider-size > img {
        width: 60%;
    }
}

/* desktops */
@media (min-width: 1024px) {
    .slider-size {
        height: 300px;
    }
    .slider-size > img {
        width: 60%;
    }
}

/*slide caption*/
.carousel-caption h3 {
    font-family: 'Della Respira', serif;
    text-shadow: 2px 2px black;
}

Upvotes: 1

Views: 1772

Answers (1)

Alex
Alex

Reputation: 1099

I have put together a bootply showing a functioning bootstrap carousel using img-responsive.

It can be done entirely using bootstrap. After looking at your code there is something that is causing a conflict with the img-responsive class, but I was unable to find it. I suggest replacing your carousel code with that in the bootply, if it works correctly then simply just put in your own images and add captions.

http://www.bootply.com/VSBjMEUu1Z

Upvotes: 1

Related Questions