title: Slide JS CSS Image resize & Centering
body: <p>I am helping a family friend with their site and they have a Slide JS on their homepage.  I need to shrink the slider images to 600px width and 300px high.  I also need to center the slider on the page.  I have tried some of the answers that were on this site and none of them have worked.  </p>
  
  <p>Here is the code:</p>
  
  <pre><code>/*-------------------------------------------------------
  * Slide JS
  //-------------------------------------------------------*/
  
  /*Common*/
  .slides-js-style {
      position:relative;
  }
  
  .slides-js-style .slides_container {    
          overflow:hidden;
      position:relative;
      display:none;
      width: 100%;
  
  }
  
  .slides-js-style .slides_container .slide {
      display:block;
  }
  
  .slider-next,
  .slider-prev {
      position:relative;
      top: 45%;
      z-index: 10;
      width: 31px;
      height: 31px;
      text-indent: -999em;
      background-image: url(../images/slide-js-arrow.png);
      background-repeat: no-repeat;
  }
  
  .slider-prev {
      left: 20px;
      background-position: 0 0;
  }
  
  .slider-prev:hover {
      background-position: 0 100%;
  }
  
  .slider-next {
      right: 20px;
      background-position: 100% 0;
  }
  
  .slider-next:hover {
      background-position: 100% 100%;
  }
  
  
  
  /*Home Slide*/
  #slides-wrap-home  {
      margin-bottom: 60px;
      background: #FFF;
  }
  
  #slides-wrap-home,
  #slides-wrap-home .slides_container .slide {
      width: 940px;
      height: 430px;
  }
  
  #slides-wrap-home .slide-caption {
      position:relative;
      left: 0;
      bottom: 0;
      padding: 5px 20px; 
      background: #333;
      border-bottom-left-radius: 5px; 
      -moz-border-radius-bottomleft: 5px; 
      -webkit-border-bottom-left-radius: 5px; 
  }
  
  #slides-wrap-home .slide-caption h3 {
      font-size: 16px; 
      color: #EEE;
      font-weight: 100;
  }
  
  #slides-wrap-home .slider-pagination {
      position: absolute;
      bottom: -28px;
      height: 11px;
      z-index: 20;
  }
  
  #slides-wrap-home .slider-pagination li {
      float: left;
      margin-right: 3px;
  }
  
  #slides-wrap-home .slider-pagination li a {
      display: block;
      text-indent: -999em;
      width: 11px;
      height: 11px;
      background-image: url(../images/slide-js-button.png);
      background-repeat: no-repeat;
      background-position: 0 0;
  }
  
  #slides-wrap-home .slider-pagination li a:hover,
  #slides-wrap-home .slider-pagination li.current a {
      background-position: 100% 0;
  }
  
  
  
  /*Post Slide*/
  .post-portfolio-list-slider {
      margin-bottom: 30px;
  }
  
  .post-single-slider-blog { 
      margin-bottom: 60px;
  }
  
  .post-portfolio-list-slider,
  .post-single-slider-blog,
  .post-portfolio-list-slider .slides_container .slide,
  .post-single-slider-blog .slides_container .slide {
      width: 560px;
      height: 350px;
  }
  
  .post-single-slider-portfolio {
      margin-bottom: 48px;
      background: #FFF;
  }
  
  .post-single-slider-portfolio,
  .post-single-slider-portfolio .slides_container .slide {
      width: 940px;
      height: 500px;
  }
  
  .post-portfolio-list-slider .slider-next,
  .post-portfolio-list-slider .slider-prev {
      opacity: 0; 
      filter: alpha(opacity=0); 
  }
  
  .post-slider-wrap .slider-pagination {
      position: absolute;
      bottom: -28px;
      height: 9px;
      z-index: 20;
  }
  
  .post-slider-wrap .slider-pagination li {
      float: left;
      margin-right: 3px;
  }
  
  .post-slider-wrap .slider-pagination li a {
      display: block;
      text-indent: -999em;
      width: 9px;
      height: 9px;
      background-image: url(../images/post-slider-btn.png);
      background-repeat: no-repeat;
      background-position: 0 0;
  }
  
  .post-slider-wrap .slider-pagination li a:hover,
  .post-slider-wrap .slider-pagination li.current a {
      background-position: 100% 0;
  }
  </code></pre>
  
  <p>Any help would be appreciated, thanks!</p>
  
  <p>Revised here is the HTML code:</p>
  
  <pre><code>    &lt;link rel='stylesheet' id='slideshow-css'  href='/Portals/174841/js/slideshow.css?ver=1.0.1' type='text/css' media='screen' /&gt;
  &lt;script type='text/javascript' src='/Portals/174841/js/jquery.js?ver=1.7.1'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='/Portals/174841/js/jquery.scripts.js?ver=1.0.1'&gt;&lt;/script&gt;
  &lt;script type='text/javascript' src='/Portals/174841/js/custom.js?ver=1.0.1'&gt;&lt;/script&gt;
  
  
  
  
  
  &lt;div id="slides-wrap-home" class="slides-js-style" data-loader="/Portals/174841/images/slider-loader.gif"&gt;
  &lt;div class="slides_container"&gt;
  &lt;div class="slide"&gt;
  &lt;img width="940" height="430" src="/Portals/174841/images/IMG_20120126_102410-940x430.jpg" class="wp-featured-image" alt="Dimensional Letters" /&gt;   &lt;/div&gt;
  &lt;div class="slide"&gt;
  &lt;img width="940" height="430" src="/Portals/174841/images/133498_297690699994_98792189994_1198958_5498342_o-940x430.jpg" class="wp-featured-image" alt="Vehicle Graphics" /&gt;    &lt;/div&gt;
  &lt;div class="slide"&gt;
  &lt;img width="940" height="430" src="/Portals/174841/images/IMG_20110829_143414-940x430.jpg" class="wp-featured-image" alt="Cabinet Sign Faces" /&gt;    &lt;/div&gt;
  &lt;div class="slide"&gt;
  &lt;img width="940" height="430" src="/Portals/174841/images/CIMG2573-940x430.jpg" class="wp-featured-image" alt="Wall Vinyl" /&gt;   &lt;/div&gt;
  &lt;div class="slide"&gt;
  &lt;img width="940" height="430" src="/Portals/174841/images/cimg1622.jpg" class="wp-featured-image" alt="Window Decals" /&gt;    &lt;/div&gt;
  &lt;/div&gt;&lt;!--end slides_container--&gt;
  &lt;/div&gt;&lt;!--end slides-wrap--&gt;
  </code></pre>
  
  <p>Thanks!</p>