FROM CACHE - de_header
Diese Community hat auf Peer-to-Peer-Support umgestellt. Der Shopify Support wird diese Community nicht mehr betreuen. Wir empfehlen dir, dich mit anderen Händler:innen und Partner:innen in Verbindung zu setzen, um Unterstützung zu erhalten und Erfahrungen auszutauschen. Bitte melde weiterhin alles, was gegen unseren Verhaltenskodex verstößt, oder Inhalte, die deiner Meinung nach entfernt werden sollten.

Betreff: Separate Bannerbilder Auf Mobilgeräten Und Desktops – Dawn Theme

Gelöst

Separate Bannerbilder Auf Mobilgeräten Und Desktops – Dawn Theme

koenigsprime
Entdecker
16 1 3

Hallo,

Ich möchte verschiedene Bannerbilder auf Mobilgeräten und Desktops haben. Ich habe hier ein, der leider bei nicht ganz richtig ist. 

 

 

.banner__media:first-child {
    width: 100%;
}
.banner__media+.banner__media {
    display: none;
}
@media screen and (max-width: 749px) {
    .banner__media:first-child {
        display: none;
    }
    .banner__media+.banner__media {
        width: 100%;
        display: block !important;
    }
}
@media screen and (max-width: 749px) {
    .banner__content::before{
        padding-bottom: 150% !important;
    }
}

 

 

1 AKZEPTIERTE LÖSUNG
Gabe
Shopify Staff (Retired)
19233 3006 4432

Erfolg.

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

13 ANTWORTEN 13

Gabe
Shopify Staff (Retired)
19233 3006 4432

Hey @koenigsprime 

 

Danke für den Code und du sagst "Ich habe hier ein, der leider bei nicht ganz richtig ist", nur erklärst du uns nicht WIE dieser nicht ganz richtig ist... Was genau meinst du dabei?

 

Dein CSS-Snippet scheint darauf abzuzielen, verschiedene Bannerbilder für Mobilgeräte und Desktops im Dawn-Theme von Shopify zu verwenden. Ggf. bist du nahe dran, aber ein paar Anpassungen könnten notwendig sein, um es perfekt zu machen. 

 

Ein paar Tipps dazu:

Stelle sicher, dass beide Banner-Elemente im HTML vorhanden sind und das CSS korrekt angewendet wird, um eines auf Desktops und das andere auf Mobilgeräten anzuzeigen. Wenn du weiterhin Probleme hast, könnte es hilfreich sein, spezifische Aspekte deiner Implementierung zu überprüfen, wie die korrekte Anwendung der CSS-Class und die Reihenfolge der Media Queries.

 

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

---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 in das Shop einbauen, um deinen Kunden etwas Gamification und 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

koenigsprime
Entdecker
16 1 3

Hallo,

 

Ich bedanke mich für die Antwort.  Ich habe ein sehr gutes Video auf YouTube gesehen. Hier ist es. Wie zeige ich in Shopify verschiedene Bannerbilder auf Mobilgeräten und Desktops an? 

koenigsprime
Entdecker
16 1 3

Hallo,

 

Aber wobei Sie mir helfen könnten ist, die Mobile Bild Größe festzulegen. Hier 2 Bilder, wie es auf dem Desktop und Mobile aussieht. 

Screenshot 2024-03-20 162138.pngScreenshot 2024-03-20 162159.png

Gabe
Shopify Staff (Retired)
19233 3006 4432

@koenigsprime 

 

Ich brauche dafür einen Direktlink zu diesen Bildern und dann kann ich morgen nochmal 👁️ ein drauf werfen.

 

VG,

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

koenigsprime
Entdecker
16 1 3
Gabe
Shopify Staff (Retired)
19233 3006 4432

@koenigsprime 

 

Um die Bildgröße des Bildes des Hero Banners nur auf mobile anzupassen, ohne die Desktop-Version zu beeinflussen, die Media-Queries verwenden, beispielsweise spezifische Stile nur für Bildschirmbreiten unter einem bestimmten Breakpoint definieren. Hier ist ein Beispiel:

 

@media (max-width: 749px) {
 .banner__media img {
   max-width: 100%;
   height: auto;
 }
}

 

Dieses Snippet sorgt dafür, dass auf Geräten mit einer Bildschirmbreite von bis zu 749px das Bild in voller Breite angezeigt wird, während die Höhe automatisch angepasst wird, um das Seitenverhältnis zu erhalten. Du kannst die Pixelzahl im max-width-Media-Query und die Stile innerhalb des Blocks an deine spezifischen Bedürfnisse anpassen.

 

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

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

koenigsprime
Entdecker
16 1 3

Hallo,

 

Wo soll ich diesen Code einfügen. Der jetziger Code Sieht so aus. 

/* Code for Desktop Banner */

@media screen and (max-width: 480px){
  #Banner-template--21076319895876__image_banner {
    display: none;
    /* Code contrubution by websensepro.com */
}}

/* Code for Mobile Banner */
@media screen and (max-width: 480px) {
#Banner-template--21076319895876__image_banner_6y7Lqf {
    display: block !important;
  /* Code contrubution by websensepro.com */
}}

#Banner-template--21076319895876__image_banner_6y7Lqf {
    display: none;
}
Gabe
Shopify Staff (Retired)
19233 3006 4432

@koenigsprime 

 

Vielleicht hilft dir dafür unsere Anleitung hier, so dass du keine Änderungen zu deinem Theme Code machst die 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen

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

koenigsprime
Entdecker
16 1 3

Hallo,

 

Naja gemacht habe ich schon. Ich wollte nur wissen, wo ich den Code, den du mir geschickt hast, in mein Code einfügen muss, damit ich die Bild Größe richtig einstellen kann. 

Gabe
Shopify Staff (Retired)
19233 3006 4432

Erfolg.

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

koenigsprime
Entdecker
16 1 3

Hallo,

 

Vielen Dank

Gabe
Shopify Staff (Retired)
19233 3006 4432

@koenigsprime 

 

Ist das eine Lösung für deinen Banner auf Mobile?

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

koenigsprime
Entdecker
16 1 3

Hallo,

 

Ja