Support » Themes » Theme Kale: Slider responsive machen

  • Hallo zusammen,
    ich hoffe ihr könnt mir helfen, ich verzweifele etwas an dem Slider der im Theme Kale ist. Leider bekomme ich diesen nicht responsive, d.h auf dem Smartphone und Tablet werden die Fotos im Slider immer verzerrt dargestellt. Kann ich das irgendwie anpassen?

    Der Code im Editor lautet wie folgt:

    .frontpage-slider{margin-bottom:40px}
    
    .frontpage-slider .owl-carousel-item{position:relative;display:none}
    .frontpage-slider .owl-item .owl-carousel-item,
    .frontpage-slider .owl-carousel-item.active{display:block}
    .frontpage-slider .owl-carousel-item:before{width:100%;height:100%;background-color:#555555;opacity:0.15;content:"";position:absolute;left:0;top:0;z-index:2}
    .frontpage-slider .owl-carousel-item img{position:relative;z-index:1;max-width:1200px;height:600px}

    Ich bin dankbar für jeden Tipp, leider ist vieles noch absolutes Neuland für mich :/

    Liebe Grüße

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 7 Antworten - 1 bis 7 (von insgesamt 7)
  • Hi!

    Das Problem ist, dass den Bildern im Slider eine feste Höhe in Pixeln zugewiesen ist. Folgender CSS-Code sollte das Problem beheben:

    
    .frontpage-slider .owl-carousel-item img {
        height: auto;
    }
    

    Den Code kannst du unter DesignCustomizerZusätzliches CSS einfügen.

    Viele Grüße
    Florian

    Ahh super – das hat sofort geklappt! Vielen Dank dafür! 🙂

    Darf ich direkt noch eine Frage stellen? Es geht um die Icons in meinem Header Menü, ist es möglich diese direkt nebeneinander abzubilden, ohne die Lücke zwischen den einzelnen Icons?

    Danke und liebe Grüße

    Klar 🙂

    Das hier sollte helfen:

    
    .navbar-default a[href*="facebook.com/"],
    .navbar-default a[href*="instagram.com/"],
    .navbar-default a[href*="pinterest.de/"],
    .navbar-default a[href*="/contact/"],
    .navbar-default .search a {
        padding-left: 0;
        padding-right: 0;
    }
    
    .navbar-default a span {
        display: none;
    }
    

    Wenn dir das zu dicht ist, kannst du die Werte für padding-left und padding-right anpassen. Die zweite Regel (mit dem display: none) entfernt die Punkte, die aus irgendeinem Grund rechts von jedem Icon sind.

    Viele Grüße
    Florian

    Ach super! Das klappt alles wunderbar – vielen Dank nochmals an dieser Stelle.

    Vielleicht kannst du mir auch noch einmal helfen und zwar geht es um die Anordnung in meinen Unterkategorieren. Leider springen mir die Bilder immer aus der Reihe! Wäre es möglich diese direkt nebeneinander bzw. untereinander anzuzeigen?

    http://caprisserie.com/recipe-box/cakes/

    Und eventuell sogar in etwas größer?`

    Liebe Grüße

    Du kannst folgendes probieren: Geh in der Bearbeitungsansicht des Beitrags in die Text-Ansicht des Editors (rechts oben beim Editor gibt es die beiden Tabs Visuell und Text). Und dann packst du alle Vorkommen von [caption]<img […]>[/caption] in ein div:

    <div style="display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;">
    
    <!-- hier kommen die ganzen [caption]<img […]>[/caption] hin -->
    
    </div>
    

    Um die Bilder größer zu bekommen, kannst du unter EinstellungenMedien die Maße für die Vorschaubilder verändern. Anschließend musst du die Vorschaubilder neu generieren lassen – das geht zum Beispiel mit diesem Plugin hier: https://de.wordpress.org/plugins/regenerate-thumbnails/

    Viele Grüße

    Hey Florian!

    Vielen Dank für deine schnelle Hilfe, das hat ebenfalls geklappt.

    Nun ist mir allerdings aufgefallen, dass die Social Media Icons im Header bzw. die Links zu den Social Media Seiten sich nicht in einem neuen Tab öffnen, kann man das irgendwie einstellen? Die Icons habe ich unter dem „Menü“ über „Custom Link“ eingefügt.

    Danke dir und viele Grüße

    Hi!

    Davon würde ich persönlich abraten und dem Besucher die Wahl lassen, ob er Links in einem neuen Tab haben möchte oder nicht.

    Wenn du das aber unbedingt machen willst, dann kannst du einen Haken bei »Link in einem neuen Tab öffnen« setzen – die Box erscheint in der Detail-Ansicht von Menüeinträgen, die bereits dem Menü hinzugefügt sind (unter DesignMenüs – in der Menüverwaltung des Customizers gibt es die Checkbox nicht).

    Viele Grüße
    Florian

Ansicht von 7 Antworten - 1 bis 7 (von insgesamt 7)
  • Das Thema „Theme Kale: Slider responsive machen“ ist für neue Antworten geschlossen.