Image-banner für mobile zu klein

[Odeure12]

Hallo, ich versuche den Image-banner anzupassen oder eine andere Datei dafür auszuwählen. Bei der Desktop Version der Seite sieht alles okay aus, wenn ich aber auf die Mobile Ansicht wechsel dann wird das der banner ziemlich klein. Ich hätte ihn jedoch gerne über die ganze Seite. Ich benutze das Origin Theme.

 

 Vielen Dank für Antworten.

[Gabe]

Hey @Odeure12 

Danke für die Bilder und das von dir beschriebene Problem kann häufig auftreten wenn man sich an unsere Bilder Grössen und Dimensionen hält, die in unseren Anleitungen hier empfehlen werden.

Wenn du es selber in deinem Hero Banner programmieren möchtest dann bitte das folgende immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. 

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

• Gehe in deinen Theme -> Aktionen -> Duplizieren -> Code bearbeiten.

• Suchen Sie im linken Datei-Explorer die Datei theme.scss.liquid oder theme.css.liquid.

• Diese Datei befindet sich normalerweise im Ordner "Assets".

• Scrolle zum Ende der Datei und füge den folgenden CSS-Code ein, um das Hero-Banner für die mobile Ansicht anzupassen:

/* Anpassung des Hero-Banners für die mobile Ansicht */
@media screen and (max-width: 767px) {
 .banner-image img {
   object-fit: cover;
   height: 100%;
   width: 100%;
 }
}

Der obige Code stellt sicher, dass das Banner-Bild auf mobilen Geräten den gesamten verfügbaren Platz einnimmt und nicht abgeschnitten wird. Der Wert object-fit: cover sorgt dafür, dass das Bild skaliert wird, um den Container vollständig auszufüllen und dabei das Seitenverhältnis beizubehalten.

Bitte beachte, dass diese Änderungen spezifisch für das Origin Theme sind und je nach Version des Themes leicht variieren können. Wenn der Code nicht wie erwartet funktioniert, überprüfe die HTML- und CSS-Struktur des Banners im Theme, um sicherzustellen, dass du die richtigen Klassennamen verwendest.

Es ist also ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

[Odeure12]

Hey, danke @Gabe schonmal. Leider finde ich die scss bzw. css theme files nicht.

Kann es sein das die base.css diese ersetzt? Auch wenn ich den Code dort einsetze passiert nicht wirklich etwas.

[Gabe]

Das wäre die base.css genau. Aber bitte mit einem Programmierer/Experten.