JSSOR Slider, Höhe vom Container per CSS verstellen?

  • Grüß euch,


    ich schon wieder und wieder eine css Frage die ich nicht lösen kann......
    Auf der [Link entfernt] habe ich einen JSSOR-Slider eingefügt. Die Höhe und Breite habe ich per css geändert, da er mir sonst immer auf die maximale Breite geht. Folgenden Code habe ich unter Sitemap -> praxis.html -> Eigenschaften -> Erweitert -> vor dem </head> taghinzugefügt:

    Code
    1. <style type="text/css">
    2. #imContent {/*margin-right: 4px;*/ border-color: #D3EBD7; border-width: 1px; border-style: solid; border-radius: 5px 5px 5px 5px;}
    3. #imCellStyle_3 { margin-left: auto; margin-right:auto; margin-bottom: auto; width: 400px; height: 267px; }
    4. /*#slides { height: 270px;}
    5. #imCellStyleGraphics_3 {height: 270px;}*/
    6. #pluginAppObj_63_container {height: 270px;}
    7. </style>

    läuft fast wunderbar, bis auf die Höhe vom Container/Box oder wie auch immer, egal was ich versuche (arbeite mit "try & error, und dem Forum hier :thumbsup: ) ich komm nicht dahinter. Hat jemand von euch einen Tipp was ich in dem css File angeben muss, damit die Höhe angepasst wird (im mobilen Template passt die Höhe)?


    Danke,
    Thomas

  • Bei imCellStyle_3 nicht height sondern min-height: 20px!important;


    und dann bei #imCell_3 auch noch min-height: 20px!important;

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • ich bin jetzt ganz unverschämt und frage nach, ob es eine Möglichkeit gibt, dass der JSSOR Slider sich autom. an die Bildbreite anpasst? min-widht:20px!important; ist es natürlich nicht, das wäre zu einfach gewesen ;)

  • ups, jetzt habe ich gerade ein Problem endeckt, nach de Angaben min-height: 20px!important; und min-height: 20px!important; läuft die Slideshow im mobilen Layout in der vollen Höhe, das Bild ist dann rechts abgeschnitten bzw. lässt sich nach rechts scrollen. Gibt es da Abhilfe?
    Seite

  • Anscheinend ist der JSSOR Slider nicht responsive gemacht.


    du musst den Selektor #imCellStyle_3 mit width:100%; setzen, aber dann wird auch die Desktop Version auf 100% gesetzt. Wenn du das nicht willst, musst du es mit media query machen "@media (max-width: 959px) {...}

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • danke, mit folgendem Code hab ich es hinbekommen, dass beide Ansichten passen:

    CSS
    1. <style type="text/css">
    2. #imContent {border-color: #D3EBD7; border-width: 1px; border-style: solid; border-radius: 5px 5px 5px 5px;}
    3. #imCellStyle_3 { margin-left: auto; margin-right:auto; margin-bottom: auto; }
    4. @media (min-width: 650px) {
    5. #imCell_3 { min-height: 20px!important; padding-top: 3px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; }
    6. #imCellStyle_3 { width: 650px; min-height: 20px!important; padding: 3px 3px 3px 3px; border-top: 0; border-bottom: 0; border-left: 0; border-right: 0;}
    7. }
    8. </style>

    das mit der Breite hab ich nicht hinbekommen, aber das ist auch nicht weiter tragisch!


    Gruß aus WIen,
    Thomas