Owl Slider funktioniert nicht unter 768 px width

Question

Ich habe Probleme damit, die owl_slider Extension (2.3.3 via TER auf typo3 7.6.2) richtig zu funktionieren. Ich habe es geschafft, dass der Slider funktioniert, aber wenn ich die Browserbreite unter 768 Pixel ändere, werden meine Kopf- und Fußzeilenbilder viel zu groß angezeigt und der Inhalt (Slider, Text, etc.) passt nicht mehr in den Inhaltsbereich (Bootstrap-Container)). Wenn ich keinen Schieberegler auf der Seite habe, funktioniert die Größenänderung ohne Probleme.

Wenn ich die Eule Schieberegler Elemente überprüfe kann ich die Breite ändern mit meinem Browser Breite, unter 768 berechnet seltsame Werte (Screenies beigefügt, die der Grund sein sollte, nicht richtig angezeigt). Irgendwelche Ideen ?

Edit: Habe gerade eine Vorlage nur mit {content} ausprobiert, der Slider hatte keine Funktion, dann habe ich ihn in einen Container gelegt und es hat funktioniert. Warum dieses Verhalten?

Vorlage:

<header class="page-row container-fluid"> 
    <div style="position:fixed;top:0px;z-index:20;" >   
     <img class="img-responsive" src="fileadmin/user_upload/slider_top_text.png" width="100%"/>   
    </div> 
    <img src="fileadmin/user_upload/slider_top_text.png" width="100%" /> 
</header> 
<main class="page-row page-row-expanded" > 
    <div class="container" style="margin-top:8px;">   
     <div >    
      <div style="float:left;"> 
       <f:cObject typoscriptObjectPath="lib.breadcrumb" /> 
      </div> 
      <div style="float:right;"> 
       <f:format.raw>{PRINTVIEW}</f:format.raw> 
      </div> 
     </div>  
     <div style="clear: both;padding-top:6px;"><f:format.raw>{content}</f:format.raw> 
      <div class="toTop"> 
       <a href="#top"><span class="glyphicon glyphicon-arrow-up"></span></a> 
      </div> 
      <div class="toTop2" style="width:80px;height:100px;background-color: white;"></div> 
     </div> 
    </div><!-- /.container --> 
</main> 
<footer class="page-row footer container-fluid" > 
    <div class="footer-bg" style=""> 
     <div class="container" > 
      <div class="row"> 
       <div class="col-md-12">  
        <p style="">some text</br> 
         <a href="http://localhost/typo3_src-7.6.2/index.php?id=6">Impressum</a>&nbsp&nbsp<a href="http://localhost/typo3_src-7.6.2/index.php?id=8">Sitemap</a>&nbsp&nbsp<a href="http://localhost/typo3_src-7.6.2/index.php?id=7">AGB</a> 
        </p> 
       </div> 
      </div> 
     </div> 
    </div>  
</footer> 

css

body { 
    display: table; 
    margin:0; 
    padding:0; 
    width: 100%; 
} 

.page-row { 
    display: table-row; 
} 

.page-row-expanded { 
    height: 100%; 
} 

.footer p {  
    margin-top: 20px; 
    text-align:center; 
} 

.footer-bg{  
    background-image:linear-gradient(180deg, white 10%,transparent 15%),url(http://localhost/typo3_src-7.6.2/fileadmin/user_upload/sand-181273_1920.jpg); 
    background-size:100%; 
    background-position: center; 
    background-repeat:no-repeat; 
} 

tr{ 
    vertical-align: top; 
    border-top:1px solid;  
} 

.toTop { 
    z-index: -1; 
    position: fixed; 
    bottom: 40%; left: 1%; 
} 

.toTop2 { 
    z-index: -1; 
    position: absolute; 
    bottom: 40%; left: 1%; 
} 

html, body{ 
    height:100%; /* needed for container min-height */ 
} 

th, td, caption{ 
    padding: 8px;  
} 

table{ 
    width:100%; 
} 


.element2cols { overflow:hidden;} 
.col1, .col2 { width:48%; float:left; } 
.col1 { margin-right:2%; } 
.col2 { margin-left: 2%; } 

typoscript

page = PAGE 
page { 
    config { 
      metaCharset = utf-8 
      additionalHeaders = Content-Type:text/html;charset=utf-8 
      index_enable = 1 
    } 

/* Bootstrap 3 automatic responsive, do i need it ? 
     meta{ 
      name = viewport 
      content = width=device-width, initial-scale=1.0     
     } 
*/ 

    includeCSS.bootstrap = EXT:spif_distribution/Resources/Public/Bootstrap/css/bootstrap.min.css 
    includeCSS.bootstratheme = EXT:spif_distribution/Resources/Public/Bootstrap/css/bootstrap-theme.min.css 
    includeCSS.bootstrapcustom = EXT:spif_distribution/Resources/Public/Css/custom.css 

    includeJS.bootstrap = EXT:spif_distribution/Resources/Public/Bootstrap/js/bootstrap.min.js 

    10 = FLUIDTEMPLATE 
    10 { 
      file = EXT:spif_distribution/Resources/Private/Template/index.html 
      layoutRootPath = EXT:spif_distribution/Resources/Private/Layouts/ 
      partialRootPath = EXT:spif_distribution/Resources/Private/Partials/ 
      variables { 
        hallo = TEXT 
        hallo.value = HALLO WELT! 
        content < styles.content.get 

        PRINTVIEW = TEXT 
        PRINTVIEW { 
         value = Druckansicht 
         typolink.parameter.data = page:uid 
         typolink.additionalParams.insertData=1 
         typolink.additionalParams =&type=10 

        } 
      }     
    } 
} 

Bilder

Answer 1

Ich hatte die ähnliche Art von Problem. Entfernen Sie die Anzeige: Tabelle; und Anzeige: Tabellenzeile; von deinem CSS. Dieses Ding hat für mich funktioniert. Es könnte auch für Sie funktionieren.