title: Slider content with media query
body: <p>I am trying to create slider responsive. Roundabout slider will be used, actually roundabout is responsive but it is not working for me, so I decided to create custom media queries. The problem is <code>.rd-slider</code> is not showing in middle of the screen when screen size is less than 1199px in width. How do I place <code>.rd-slider</code> class middle on the screen? Here's my CSS</p>
  
  <pre><code>    #warper {
      border: 0 none;
      height: auto;
      position: relative;
      width: auto;
  }
  .roundabout-holder {
      height: 30em;
      list-style: none outside none;
      margin: 0 auto;
      padding: 0;
  }
  .roundabout-moveable-item {
      background-color: #CCCCCC;
      border: 1px solid #999999;
      cursor: pointer;
      height: 300px;
      width: 450px;
  }
  .roundabout-in-focus {
      cursor: auto;
  }
  .rd-slider {
      width: auto;
  }
  .rslide {
      margin: 0 auto;
      width: 400px;
  }
  @media (min-width: 768px) and (max-width: 1199px) {
  .warper {
      background: none repeat scroll 0 0 #0000FF;
      border: 0 none;
      height: auto;
      padding: 0;
  }
  }
  @media (min-width: 768px) and (max-width: 1199px) {
  .rd-slider {
      background: none repeat scroll 0 0 #FF0000;
      margin: 0 auto;
      padding-top: 50px;
      width: auto;
  }
  }
  @media (min-width: 768px) and (max-width: 1199px) {
  .rslide {
      float: left;
      margin: 0 auto;
      width: 300px;
  }
  }
  </code></pre>
  
  <p>And HTML</p>
  
  <pre><code>        &lt;div id="warper"&gt;
          &lt;div class="rd-slider"&gt;
              &lt;ul class="rslide"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="#"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>