CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
James Ocean
James Ocean

Reputation: 155

How to stop the carousel slideshow from being too small in mobile view?

I am having a problem with my carousel slideshow is seems to be too small when the browser window is small or in mobile view.

Here is a codepen link to my problem - http://codepen.io/anon/pen/zBLWZb 

<div class="bs-example">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Carousel indicators -->

        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://www.artsfon.com/pic/201503/2560x1440/artsfon.com-61078.jpg" alt="First Slide">
                <div class="carousel-caption">
                  <h2 class="slider-title" style="color:#DAA520;" data-animation="wow animated bounceInDown">Mann's Solutions</h2>
              <p class="slide-description">Immigration Law Firm</p>
               <div id="arrowtoaboutus" class="arrow bounce">&nbsp;</div>
                </div>
            </div>

        </div>
        <!-- Carousel controls -->
    </div>
</div>

Here is my css. As you can see I tried to set the slideshow to 500px in mobile view.

 .carousel-caption {
    top: 40%;
    bottom: auto;
    padding-bottom: 500px;
    /*padding-top: 250px;*/
}



@media (min-width:768px) { 
    .carousel .carousel-inner .item {
        min-height: 500px;
    }
}

SOLUTION

I had to add the following CSS:

.img-carousel { min-width: 800px;}

@media (max-width: 768px) { 
    .carousel .carousel-inner .item {
        height: 500px;
    }
}

Upvotes: 2

Views: 1996

Answers (1)

Jozefini
Jozefini

Reputation: 316

Add a class to your image for example class="img-carousel"

HTML:

<div class="bs-example">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Carousel indicators -->

        <!-- Wrapper for carousel items -->
        <div class="carousel-inner">
            <div class="item active">
                <img class="img-carousel" src="http://www.artsfon.com/pic/201503/2560x1440/artsfon.com-61078.jpg" alt="First Slide">
                <div class="carousel-caption">
                  <h2 class="slider-title" style="color:#DAA520;" data-animation="wow animated bounceInDown">Mann's Solutions</h2>
              <p class="slide-description">Immigration Law Firm</p>
               <div id="arrowtoaboutus" class="arrow bounce">&nbsp;</div>
                </div>
            </div>

        </div>
        <!-- Carousel controls -->
    </div>
</div>

CSS:

.carousel-caption {
    top: 40%;
    bottom: auto;
    padding-bottom: 500px;
    /*padding-top: 250px;*/
}

    .img-carousel { min-width: 800px;}

@media (max-width: 768px) { 
    .carousel .carousel-inner .item {
        min-height: 500px;
    }
}

Use this code if you don't want your image to be resized when you small the screen : 

.img-carousel { min-width: 800px;}

The minimum size of your carousel:

    @media (max-width: 768px) { 
        .carousel .carousel-inner .item {min-height: 500px;}
}

Demo on Codepen: http://codepen.io/infuzzione/pen/VjBxbP

Upvotes: 1

Related Questions