Making Carousel which displays part of next/prev responsive

Question

I have a carousel which displays parts of the next and prev images but at the moment it is not responsive for anything above mobile size. Here is the code:

<style>
        .item img:first-child,
        .item img:last-child {
            display: none;
        }
        /* Small devices (tablets, 768px and up) */
        @media (min-width: 768px) {
            .item img {
                float: left;
                /*width: 600px;*/
            }
            .item img:first-child,
            .item img:last-child {
                display: block;
            }
            .item.active {
                overflow: hidden;
                margin: 0 -546px;
            }
        }
        /* Medium devices (desktops, 992px and up) */
        @media (min-width: 992px) {
            .item img {
                /*width: 600px;*/
            }
            .item.active {
                margin: 0 -434px;
            }
        }
        /* Large devices (large desktops, 1200px and up) */
        @media (min-width: 1200px) {
            .item img {
                /*width: 600px;*/
            }
            .item.active {
                margin: 0 -427px;
            }
        }

        .carousel-inner .active.left { left: -33%; }
        .carousel-inner .next        { left:  33%; }
        .carousel-inner .prev        { left: -33%; }

    </style>

<div class="container-fluid no-pad">
        <div class="row">
            <div class="col-lg-12 no-pad">
                <div id="myCarousel" class="carousel slide" data-ride="carousel">
                    <!-- Wrapper for slides -->
                    <div align="center" class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                        <div class="item">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                            <img src="http://placehold.it/1148x780" alt="Chania" class="img-responsive">
                        </div>
                    </div>
                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" 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>
    </div>

I want the carousel to shrink (which is why I added img-responsive BS class). But at the moment it is staying the same size

Answer 1

I hope is this what you are looking for, I have simplified your CSS:

.item img {
  float:left;
  max-width:33.33% !important;
}

@media (max-width: 768px) {

  .item img {
    max-width:100% !important;  
   }

  .item img:first-child,
  .item img:last-child {
    display: none !important;
  }

}


.carousel-inner .active.left { left: -33%; }
.carousel-inner .next        { left:  33%; }
.carousel-inner .prev        { left: -33%; }

Check the JSFiddle result here.