Flexslider IMG set to 0x0 at 768px and below

Question

I have a flexslider which works just fine at media queries of 769px and greater however as soon as the viewport gets to 768px wide, the IMG within flexslider is showing up in the Chrome inspector as 0x0 in size. No where in the inspector is the IMG being set to 0x0

http://70e-solutions.mybigcommerce.com/

Here is the full code being called:

<div id="ibSlideShow">
  <div class="inner">
    <div class="Content Widest" id="LayoutColumn1">
      <script type="text/javascript" src="javascript/jquery/plugins/jquery.flexslider.js"></script>
      <script type="text/javascript">
        $(window).load(function() {
          $('.slide-show').flexslider({
            slideshowSpeed: $('.slide-show').attr('data-swap-frequency') * 1000,
            animation: "slide",
            pauseOnHover: true,
            controlNav: true,
            directionNav: true
          });
        });
      </script>

      <div class="slide-show slide-show-render slide-show-render-full flexslider Panel" data-swap-frequency="1000" id="HomeSlideShow">
    	<ol class="slides">
          <li class="slide clone">
            <a href="#">
              <div class="slide-content">
				<div class="slide-overlay">
					<h2 class="slide-heading" style="color: #ffffff"></h2>
					<p class="slide-text" style="color: #ffffff"></p>
					<div class="slide-button" style="display:none; visibility: hidden"><span class="btn" style="color: #ffffff"></span></div>
				</div>
				<span class="slide-image-wrapper">
					<img class="slide-image" src="http://cdn6.bigcommerce.com/s-y4b1n34/product_images/theme_images/slide_2.jpg?t=1416519561" alt="">
				</span>
		      </div>
	        </a>
          </li>
		  <li class="slide">
            <a href="">
              <div class="slide-content">
				<div class="slide-overlay">
					<h2 class="slide-heading" style="color: #ffffff"></h2>
					<p class="slide-text" style="color: #ffffff"></p>
					<div class="slide-button" style="display:none; visibility: hidden"><span class="btn" style="color: #ffffff"></span>
                    </div>
				</div>
				<span class="slide-image-wrapper">
					<img class="slide-image" src="http://cdn6.bigcommerce.com/s-y4b1n34/product_images/theme_images/slide_1.jpg?t=1416519561" alt="">
                </span>
              </div>
            </a>
          </li>
          <li class="slide">
				<a href="">
					<div class="slide-content">
							<div class="slide-overlay">
								<h2 class="slide-heading" style="color: #ffffff"></h2>
								<p class="slide-text" style="color: #ffffff"></p>
								<div class="slide-button" style="display:none; visibility: hidden"><span class="btn" style="color: #ffffff"></span></div>
							</div>
							<span class="slide-image-wrapper">
								<img class="slide-image" src="http://cdn6.bigcommerce.com/s-y4b1n34/product_images/theme_images/slide_2.jpg?t=1416519561" alt="">
							</span>
					</div>
				</a>
			</li>
		</ol>
      </div>
    </div>
  </div>
</div>

Answer 1

in responsive.css?t=1416605492 you have

/* 768px */
@media screen and (max-width: 768px) {

    /* Hide */

    #HomeSlideShow,
    #ProductBreadcrumb,
    .productlist-page .Left {
        display: none;
    }

#HomeSlideShow is set to invisible remove #HomeSlideShow from this section