2014-11-21 3 views
0

У меня есть flexslider, который отлично работает при медиа-запросах 769px и выше, однако, как только область просмотра достигает ширины 768 пикселей, IMG внутри flexslider появляется в инспекторе Chrome как 0x0. Нет, где в инспекторе является IMG быть установлен в 0x0Flexslider IMG установлен на 0x0 при 768px и ниже

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

Вот полный код называют:

<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"> 
 
    \t <ol class="slides"> 
 
      <li class="slide clone"> 
 
      <a href="#"> 
 
       <div class="slide-content"> 
 
\t \t \t \t <div class="slide-overlay"> 
 
\t \t \t \t \t <h2 class="slide-heading" style="color: #ffffff"></h2> 
 
\t \t \t \t \t <p class="slide-text" style="color: #ffffff"></p> 
 
\t \t \t \t \t <div class="slide-button" style="display:none; visibility: hidden"><span class="btn" style="color: #ffffff"></span></div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <span class="slide-image-wrapper"> 
 
\t \t \t \t \t <img class="slide-image" src="http://cdn6.bigcommerce.com/s-y4b1n34/product_images/theme_images/slide_2.jpg?t=1416519561" alt=""> 
 
\t \t \t \t </span> 
 
\t \t  </div> 
 
\t   </a> 
 
      </li> 
 
\t \t <li class="slide"> 
 
      <a href=""> 
 
       <div class="slide-content"> 
 
\t \t \t \t <div class="slide-overlay"> 
 
\t \t \t \t \t <h2 class="slide-heading" style="color: #ffffff"></h2> 
 
\t \t \t \t \t <p class="slide-text" style="color: #ffffff"></p> 
 
\t \t \t \t \t <div class="slide-button" style="display:none; visibility: hidden"><span class="btn" style="color: #ffffff"></span> 
 
        </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <span class="slide-image-wrapper"> 
 
\t \t \t \t \t <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"> 
 
\t \t \t \t <a href=""> 
 
\t \t \t \t \t <div class="slide-content"> 
 
\t \t \t \t \t \t \t <div class="slide-overlay"> 
 
\t \t \t \t \t \t \t \t <h2 class="slide-heading" style="color: #ffffff"></h2> 
 
\t \t \t \t \t \t \t \t <p class="slide-text" style="color: #ffffff"></p> 
 
\t \t \t \t \t \t \t \t <div class="slide-button" style="display:none; visibility: hidden"><span class="btn" style="color: #ffffff"></span></div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <span class="slide-image-wrapper"> 
 
\t \t \t \t \t \t \t \t <img class="slide-image" src="http://cdn6.bigcommerce.com/s-y4b1n34/product_images/theme_images/slide_2.jpg?t=1416519561" alt=""> 
 
\t \t \t \t \t \t \t </span> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </a> 
 
\t \t \t </li> 
 
\t \t </ol> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

ответ

1

в responsive.css т = 1416605492 у вас есть

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

    /* Hide */ 

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

#HomeSlideShow установлен на невидимое удалить # HomeSlideПоказать к этому разделу