Separate Bannerbilder Auf Mobilgeräten Und Desktops – Dawn Theme

[koenigsprime]

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;
    }
}

[Gabe]

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.

[koenigsprime]

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]

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.

[Gabe]

@koenigsprime

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

VG,

[koenigsprime]

https://www.koenigsprime.de/

[Gabe]

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

[koenigsprime]

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]

@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.

[koenigsprime]

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]

[koenigsprime]

Hallo,

Vielen Dank

[Gabe]

@koenigsprime

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

[koenigsprime]

Hallo,

Ja