FROM CACHE - de_header

Mobile Diashow Local Theme

Gelöst

Mobile Diashow Local Theme

DavidKrusche
Neues Mitglied
5 0 0

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!

 

Bildschirmfoto 2024-06-10 um 14.16.07.pngIMG_0543.PNG

 

2 AKZEPTIERTE LÖSUNGEN

Gabe
Shopify Staff
18375 2876 4240

Erfolg.

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 | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

Gabe
Shopify Staff
18375 2876 4240

Erfolg.

Hast du das wie folgt gemacht? 

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

8 ANTWORTEN 8

Gabe
Shopify Staff
18375 2876 4240

Erfolg.

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 | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

DavidKrusche
Neues Mitglied
5 0 0

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
Shopify Staff
18375 2876 4240

Erfolg.

Hast du das wie folgt gemacht? 

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

DavidKrusche
Neues Mitglied
5 0 0

Danke 🙂

DavidKrusche
Neues Mitglied
5 0 0

Eine Frage hätte ich allerdings noch 😉

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

Gabe
Shopify Staff
18375 2876 4240

Hey @DavidKrusche 

 

Du kannst diese Zeile im Liquid finden und auskommentieren:

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

DavidKrusche
Neues Mitglied
5 0 0

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
Shopify Staff
18375 2876 4240

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! 😉

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog