title: How to make BJQS larger and responsive
body: <p>I'm trying to make the bjqs larger than it is out of the box as well as utilize its responsive feature. The issue with doing this on the slide animation version of the slider is that I can still see other not in focus slides. I'm using css to size it instead of the js it provides because that doesn't seem to work. It supposedly is supposed to set max values if responsive is true but regardless it doesn't work for me.</p>
  
  <p>Easiest way to see my issue is to download from here <a href="http://www.basic-slider.com/" rel="nofollow">http://www.basic-slider.com/</a> and web dev tools. But here is my code regardless: </p>
  
  <p>css: </p>
  
  <pre><code>#news-box-advertising {max-width: 100% !important;   }
  
  .bjqs-wrapper {width: 1600px !important; }
  
  .bjqs-slide img {width: 100% !important; }
  
  .bjqs-slide .widgetDropped{ width: 100%; margin: 0px; }
  .bjqs-slide .widgetDropped .Panel_contentMiddle{padding: 0px;}
  .bjqs-slide .widgetDropped .Panel_contentMiddle &gt; p{display: none;}
  .bjqs-slide #ctl00_ContentPlaceHolder1_widgetLayout_rptWidgets_ctl02_widgetContainer_ctl00_pnlFormattedMsgBox { background:transparent; border:0px; max-width: 100% !important; height: 100%;}
  .brdcrmhdr + br{display: none;}
   ul.bjqs{ position:relative; list-style:none; padding:0; margin:0; overflow:hidden; display:none;}
  li.bjqs-slide{  position:absolute; display:none;}
  ul.bjqs-controls{width: 100%; height: 100%; margin: 0 !important; padding: 0; z-index: 99; position: absolute; top: 0; }
  ul.bjqs-controls.v-centered li a{position:absolute;width:45px;text-indent:-9999px;  height: 100%; }
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>$('#news-box-advertising').bjqs({
          commented out // 'height' :  500;
          commented out // 'width' : 1500; 
          'animtype' : 'slide',
          'centermarkers': false,
          'responsive' : true
      });
  </code></pre>