Flex sliders slides overlapping on smaller width screens

Question

I am in the middle of making my flex slider responsive. I changed the image tags to div's and set them as background images instead. This way I can swap out the image using media queries to create a responsive feel.

However as soon as I changed them to divs they started overlapping on smaller screens. How do I control the amount of space between each slide so they dont overlap?

I just tried to make it into a JS fiddle and couldnt get it working. Im sorry for this. Here's the LINK to the project.

Thanks for any help!

HTML

         <li class="slide">
          <figure>
             <div class="slide_5 slidex"> </div>
          </figure>
        </li>

        <li class="slide">
          <figure>
             <div class="slide_6 slidex"> </div>
          </figure>
        </li>
      </ul>
    </div><!-- @end .slider -->

CSS

/** Glidejs styles **/
.slider {
    width: 100%;
    height: 448px;
    overflow: hidden;
    position:absolute;
    margin-top:110px;
    z-index:2;
}

.slides {
  height: 448px;
  overflow: hidden;
  list-style:none;
  /* Slider Animation, remove for static slider*/
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 1.440, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 1.440, 1.000); 
    -ms-transition: all 500ms cubic-bezier(0.165, 0.840, 1.440, 1.000); 
    -o-transition: all 500ms cubic-bezier(0.165, 0.840, 1.440, 1.000); 
    transition: all 500ms cubic-bezier(0.165, 0.840, 1.440, 1.000);
    }

.slide {
    width: 803px;
    height: 448px;
    float: left;
    clear: none;
    }
.slide figure {
    text-align: center;
    width:100%;
    max-width:803px;
    position: relative;
    height: 448px;
    margin-left:0px;
    }

.slide figure slidex {
    width:100%;
    position: absolute;
    bottom: 0;
    left: 0;
    }
.slider-arrow img {
    margin-top:8px;
    }
.slider-arrow {
    position: absolute;
    display: block;
    padding: 20px;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 8px;
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        transition: all 0.2s linear;
        }
.slider-arrow:hover {
    background:rgba(255,255,255,.4);
    color: #aaa;
    border-color:#fff;
    }
.slider-arrow--right { bottom: 50%; right: 30px; }
.slider-arrow--left { bottom: 50%; left: 30px; }

.slider-nav {
    position: absolute;
    bottom: 0px;
    display:none;
    }

.slider-nav__item {
    width: 12px;
    height: 12px;
    float: left;
    clear: none;
    display: block;
    margin: 0 5px;
    background: #fff;
    border-radius: 7px;
    }
.slider-nav__item:hover { background: #bababa; }
.slider-nav__item--current, .slider-nav__item--current:hover { background: #999; }

.slidex {
    width:803px;
    height:448px;
    position:absolute;
    left:50%;
    margin-left: -400px;
    background-repeat:no-repeat;
    }

.slide_1 {
    background-image:url(../slide_img/Slide_1.png)
}
.slide_2 {
    background-image:url(../slide_img/Slide_2.png)
}
.slide_3 {
    background-image:url(../slide_img/Slide_3.png)
}
.slide_4 {
    background-image:url(../slide_img/Slide_4.png)
}
.slide_5 {
    background-image:url(../slide_img/Slide_5.png)
}
.slide_6 {
    background-image:url(../slide_img/Slide_6.png)
}

@media only screen and (max-width: 500px) {
    .slide_1 {
    background-image:url(../slide_img/Slide_1.1.png)
}
}

/** responsive styles **/
@media screen and (max-width: 1050px) {
  .slider-arrow { font-size: 1.8em; padding: 15px; }
} 

@media screen and (max-width: 650px) {
  h1 { font-size: 2.9em; }
}

@media screen and (max-width: 450px) {
  h1 { font-size: 2.1em; }
}

Thanks for any help!

Answer 1

A simple solution could be to hide items that go out of each slide by adding overflow: hidden; on your .slide class.