center slider slide in mobile view using slick slider with bootstrap 3.3.5

Question

I'm using bootstrap 3.3.5 and Slick Slider to generate a responsive slider, but I have a problem when the screen size is (for example) more than 600 (but less than 768 because this is my breakpoint) ... the margin for the slide is not correctly set and I can not figure out how can I center the slide using css.

here the code I did but without success .....

$(document).ready(function() {
  $('.ft-prop').slick({
    slidesToScroll: 3,
    prevArrow: '<a type="button" class="slick-prev"><i class="glyphicon glyphicon-chevron-left"></i> </a>',
    nextArrow: '<a type="button" class="slick-next"><i class="glyphicon glyphicon-chevron-right"></i> </a>',
    centerPadding: '0',
    slidesToShow: 3,
    responsive: [{
      breakpoint: 768,
      settings: {
        arrows: true,
        centerMode: true,
        centerPadding: '0',
        slidesToShow: 1
      }
    }]
  });
});

figure {
  position: relative;
  float: left;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
}
figure img {
  border: 0;
  position: relative;
  display: block;
  min-height: 100%;
  max-width: 100%;
  opacity: 0.8;
}
figure figcaption {
  display: block;
  padding: 2em;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.25em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
figure figcaption:before,
figure figcaption:after {
  pointer-events: none;
}
figure figcaption,
figure figcaption > a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
figure figcaption > a {
  z-index: 1000;
  text-indent: 200%;
  white-space: nowrap;
  font-size: 0;
  opacity: 0;
}
figure h2,
figure p {
  margin: 0;
}
figure h2 {
  word-spacing: -0.15em;
  font-weight: 300;
}
figure h2 span {
  font-weight: 800;
}
figure p {
  letter-spacing: 1px;
  font-size: 68.5%;
}
figure.effect-layla h2 {
  padding-top: 26%;
  -webkit-transition: -webkit-transform 0.35s;
  transition: transform 0.35s;
}
figure.effect-layla h2 {
  transform: translate3d(0, -30px, 0);
  transition: opacity 0.35s, transform 0.35s;
}
figure.effect-layla p {
  padding: 0.5em 2em;
  text-transform: none;
  opacity: 0;
  -webkit-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
  transition: opacity 0.35s, transform 0.35s;
}
figure.effect-layla figcaption:before,
figure.effect-layla figcaption:after {
  position: absolute;
  content: '';
  opacity: 0;
}
figure.effect-layla figcaption:before {
  top: 50px;
  right: 30px;
  bottom: 50px;
  left: 30px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  transition: opacity 0.35s, transform 0.35s;
}
figure.effect-layla figcaption:after {
  top: 30px;
  right: 50px;
  bottom: 30px;
  left: 50px;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  -webkit-transform: scale(1, 0);
  transform: scale(1, 0);
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  transition: opacity 0.35s, transform 0.35s;
}
figure.effect-layla:hover img {
  opacity: 0.7;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transition-delay: 0.15s;
}
figure.effect-layla:hover figcaption:before,
figure.effect-layla:hover figcaption:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
figure.effect-layla:hover figcaption:after {
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
figure.effect-layla:hover h2,
figure.effect-layla:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transition-delay: 0.15s;
}
.slick-slider {
  position: relative;
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
}
.slick-track:before,
.slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir="rtl"] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-arrow {
  position: absolute;
  top: 50%;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  padding: 0;
  cursor: pointer;
  border: none;
  outline: none;
  font-size: 20px;
}
.slick-arrow.slick-hidden {
  display: none;
}
.slick-arrow.slick-disabled:before {
  opacity: .25;
}
.slick-arrow.slick-prev {
  left: -5px;
}
@media screen and (max-width: 768px) {
  .slick-arrow.slick-prev {
    left: 25px;
    z-index: 1;
  }
}
.slick-arrow.slick-next {
  right: -5px;
}
@media screen and (max-width: 768px) {
  .slick-arrow.slick-next {
    right: 25px;
    z-index: 1;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12" style="margin-top:20px;"></div>
<div class="col-md-12">
  <div class="ft-prop">
    <div class="col-md-4">
      <figure class="effect-layla">
        <img src="http://tympanus.net/Development/HoverEffectIdeas/img/1.jpg" alt="img01" class="img-thumbnail" />
        <figcaption>
          <h2>Figure <span>1</span></h2>
          <p>Lily likes to play with crayons and pencils</p>
          <a href="javascript:void(0);">View more</a>
        </figcaption>
      </figure>
    </div>
    <div class="col-md-4">
      <figure class="effect-layla">
        <img src="http://tympanus.net/Development/HoverEffectIdeas/img/2.jpg" alt="img02" class="img-thumbnail" />
        <figcaption>
          <h2>Figure <span>2</span></h2>
          <p>Lily likes to play with crayons and pencils</p>
          <a href="javascript:void(0);">View more</a>
        </figcaption>
      </figure>
    </div>
    <div class="col-md-4">
      <figure class="effect-layla">
        <img src="http://tympanus.net/Development/HoverEffectIdeas/img/3.jpg" alt="img03" class="img-thumbnail" />
        <figcaption>
          <h2>Figure <span>3</span></h2>
          <p>Lily likes to play with crayons and pencils</p>
          <a href="javascript:void(0);">View more</a>
        </figcaption>
      </figure>
    </div>

    <div class="col-md-4">
      <figure class="effect-layla">
        <img src="http://tympanus.net/Development/HoverEffectIdeas/img/4.jpg" alt="img04" class="img-thumbnail" />
        <figcaption>
          <h2>Figure <span>4</span></h2>
          <p>Lily likes to play with crayons and pencils</p>
          <a href="javascript:void(0);">View more</a>
        </figcaption>
      </figure>
    </div>
    <div class="col-md-4">
      <figure class="effect-layla">
        <img src="http://tympanus.net/Development/HoverEffectIdeas/img/5.jpg" alt="img05" class="img-thumbnail" />
        <figcaption>
          <h2>Figure <span>5</span></h2>
          <p>Lily likes to play with crayons and pencils</p>
          <a href="javascript:void(0);">View more</a>
        </figcaption>
      </figure>
    </div>
    <div class="col-md-4">
      <figure class="effect-layla">
        <img src="http://tympanus.net/Development/HoverEffectIdeas/img/6.jpg" alt="img06" class="img-thumbnail" />
        <figcaption>
          <h2>Figure <span>6</span></h2>
          <p>Lily likes to play with crayons and pencils</p>
          <a href="javascript:void(0);">View more</a>
        </figcaption>
      </figure>
    </div>

    <div class="col-md-4">
      <figure class="effect-layla">
        <img src="http://tympanus.net/Development/HoverEffectIdeas/img/7.jpg" alt="img07" class="img-thumbnail" />
        <figcaption>
          <h2>Figure <span>7</span></h2>
          <p>Lily likes to play with crayons and pencils</p>
          <a href="javascript:void(0);">View more</a>
        </figcaption>
      </figure>
    </div>
  </div>
</div>

I'm using less if some one find it easier to him using less not problem ...

here a Demo on CodePen using less with the same code

also here is a screen shot for my problem

any help will be appreciate...

Answer 1

Set in css

@media(max-width:768px) {

 figure { width: 100%; }
 img { width: 100%; }

}

or if u want and i think its looks better set on your original file for @screen-sm-min:768px;

img { width: 100%; margin: 0 auto; }

Answer 2

I think it is because your image size 480 * 360, but the screen is wider than 480px, and the css doesn't center it properly. Here is a working pen: http://codepen.io/anon/pen/zvJJJQ

The change I made is I remove the float in figure and add the following css for img tag:

   max-width:100%;
   margin: 0 auto;

Hope this help.

Answer 3

It's because of float:left on the figure element, try this:

@media (max-width: 768px) {
  figure {
    float: none;
  }
}