Mobile Diashow Local Theme

[DavidKrusche]

Hi Community,

ich arbeite aktuell mit dem Local Theme für die Entwicklung meines Shops.

www.kraidlzeig.at

Als Hero-Image nutze ich den Diashow-Abschnitt, um ein Full-Screen Image + Text-Overlay zu haben.

Desktop sieht super aus, allerdings übernimmt der Text auf Mobile das gesamte Image. Dieses kann ich zwar im Editor ändern, finde jedoch auch im Backend keinen Weg das Design anzupassen.

Freue mich auf euren Support, danke!

[Gabe · Accepted solution]

Hey @DavidKrusche 

Danke für die URL und Basierend auf der Developer Console wird die Klasse .card__text für den Text-Container verwendet. Probiere mal im CSS Editor folgenden CSS oder einen ähnlichen:

@media only screen and (max-width: 768px) {
  .card__text {
    padding: 10px; /* Anpassung des Innenabstands */
    background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund für bessere Lesbarkeit */
    text-align: center; /* Zentrierung des Textes */
  }

  .card__text h1 {
    font-size: 1.5rem; /* Kleinere Schriftgröße für Überschrift */
  }

  .card__text .button {
    font-size: 1rem; /* Kleinere Schriftgröße für den Button */
    padding: 10px 20px; /* Anpassung des Innenabstands für den Button */
  }

  .card__text-parent {
    align-items: flex-end; /* Text am unteren Rand ausrichten */
  }

  .container--large-with-mobile-padding {
    padding-left: 15px; /* Anpassen der Seitenabstände */
    padding-right: 15px;
  }
}

Das dient dich lediglich in die richtige Richtung zu weisen!

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Gabe · Accepted solution]

Hey @DavidKrusche 

Danke für die URL und Basierend auf der Developer Console wird die Klasse .card__text für den Text-Container verwendet. Probiere mal im CSS Editor folgenden CSS oder einen ähnlichen:

@media only screen and (max-width: 768px) {
  .card__text {
    padding: 10px; /* Anpassung des Innenabstands */
    background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund für bessere Lesbarkeit */
    text-align: center; /* Zentrierung des Textes */
  }

  .card__text h1 {
    font-size: 1.5rem; /* Kleinere Schriftgröße für Überschrift */
  }

  .card__text .button {
    font-size: 1rem; /* Kleinere Schriftgröße für den Button */
    padding: 10px 20px; /* Anpassung des Innenabstands für den Button */
  }

  .card__text-parent {
    align-items: flex-end; /* Text am unteren Rand ausrichten */
  }

  .container--large-with-mobile-padding {
    padding-left: 15px; /* Anpassen der Seitenabstände */
    padding-right: 15px;
  }
}

Das dient dich lediglich in die richtige Richtung zu weisen!

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[DavidKrusche]

Hi,

vielen Dank. Schriftgröße ändert sich, allerding weiß ich leider nicht wo ich den Custom CSS nur für den besagten Abschnitt ändern kann.

Aktuell ändert sich auf der ganzen Seite durch das neue CSS (über Benitzerdefiniertes CSS geändert) die Farbe von Kästen auf der ganzen Seite.

Danke 😉

[Gabe · Accepted solution]

Hast du das wie folgt gemacht? 

[DavidKrusche]

Danke 🙂

[DavidKrusche]

Eine Frage hätte ich allerdings noch 😉

Wie kann ich den Zeilenabstand ändern? Habe es mit Line-Height versucht 

[Gabe]

Hey @DavidKrusche 

Du kannst diese Zeile im Liquid finden und auskommentieren:

[DavidKrusche]

Hey Gabe, vielen Dank für die Zeit die du dir nimmst.

Wie wrsl. schon bemerkt, bin ich absoluter Anfänger hier. Ich finde daher leider im theme.liquid die besagte Zeile nicht.

Wie komme ich zu der Ansicht von deinem Video?

[Gabe]

Hey @DavidKrusche 

Die Ansicht findest du wie hier beschrieben. Probiere mal im CSS Kästchen etwas wie:

.h2 { line-height: 1.5; /* Hier kannst du den gewünschten Zeilenabstand einstellen */ }

• Zeilenabstand festlegen: Die line-height-Eigenschaft bestimmt den Zeilenabstand. In diesem Beispiel ist line-height: 1.5; gesetzt, was bedeutet, dass die Höhe jeder Zeile auf das 1,5-fache der Schriftgröße eingestellt ist. Du kannst den Wert nach Belieben anpassen, um den gewünschten Zeilenabstand zu erreichen.
• Spezifität sicherstellen: Indem du die line-height-Eigenschaft direkt auf .h2 setzt, überschreibst du andere allgemeine line-height-Einstellungen für Überschriften.

Hoffe das hilft dir weiter! 😉