ratchet slider not showing text

Question

I copy pasted the example of a ratchet slider but 1) My pictures aren't responsive and 2) The text isn't showing up over the image, or per slide.

<div class="content">
    <div class="slider" id="mySlider">
      <div class="slide-group">
         <div class="slide">
            <img src="http://goratchet.com/assets/img/slide-1.png">
            <span class="slide-text">
              <span class="icon icon-left-nav"></span>
              Slide me
            </span>
         </div>
         <div class="slide">
            <img src="http://goratchet.com/assets/img/slide-2.png">
         </div>
         <div class="slide">
            <img src="http://goratchet.com/assets/img/slide-3.png">
         </div>
      </div>
    </div>

</div>

Q: Is it ok to have:

img {
    max-width:100%;
}

Q: How do I get the text to show up per slide? I must have missed something.

Here's my site if you want to look at it.

Answer 1

I did have the exact same problem but I think I found the problem and a solution for it.

It seems like they forgot to include this code in the CSS-file:

.slider .slide-group .slide {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 100%;
    font-size: 14px;
}
.slider .slide-group .slide-text {
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    color: #fff;
    text-align: center;
    font-size: 24px;
    text-shadow: 0 0 10px rgba(0,0,0,.5);
}
.slider .slide-group {
    position: relative;
    font-size: 0;
    white-space: nowrap;
    -webkit-transition: all 0 linear;
    -moz-transition: all 0 linear;
    transition: all 0 linear;
}
.slider .slide img {
    width: 100%;
    height: 570px;
    display: block;
}