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
- Dieses Thema wurde geändert vor 6 Jahren, 6 Monaten von Torsten Landsiedel.
Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]
-
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 Design › Customizer › Zusätzliches CSS einfügen.
Viele Grüße
FlorianAhh 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
undpadding-right
anpassen. Die zweite Regel (mit demdisplay: none
) entfernt die Punkte, die aus irgendeinem Grund rechts von jedem Icon sind.Viele Grüße
FlorianAch 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 eindiv
:<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 Einstellungen › Medien 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 Design › Menüs – in der Menüverwaltung des Customizers gibt es die Checkbox nicht).
Viele Grüße
Florian
- Das Thema „Theme Kale: Slider responsive machen“ ist für neue Antworten geschlossen.