wie kann ich im Ride Theme in der ersten Seite die weißen Ränder entfernen?

[Litecard]

Hallo zusammen,

ich möchte bei meinem Ride Theme bei der ersten Seite keine weißen Ränder haben, weis aber nicht wie ich das machen soll?

ich will das, der schwarze bild Text Abschnitt durchgehend schwarz ist!

[Gabe]

Hey @Litecard 

Danke für das Bild und nur so dass ich den Sachverhalt richtig verstehe, du willst also die weißen Margins auf der Homepage deines Shopify Ride Themes entfernen und den Hero Banner in Full Width haben. 

Im Ride Theme sind diese Margins leider auf 1600px max ge-hardcodet und das zu ändern wird etwas komplex sein und eine Codeänderungen verlangen. Die Codeänderung kann auch ggf. negative Auswirkungen auf das Rendering auf Small Screens wie Mobile haben. Wenn du es selber programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du die hier eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

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

Suche die Liquid File des Abschnitts im Bereich Theme -> Aktionen -> Duplizieren -> Code bearbeiten -> Sections. Es müsste etwas wie image-with-text.liquid sein. Finde im Code den wrapper div oder container der etwas wie folgt aussieht:

<div class="wrapper">
 <!-- Section content -->
</div>

Ändere die Klasse des Wrappers, damit es die volle Breite hat. Du kannst eine bestehende Klasse mit voller Breite verwenden oder eine neue erstellen. Wenn du eine neue Klasse erstellst, musst du sie später in die CSS-Datei des Themes einfügen. Ändere den Wrapper zum Beispiel in:

<div class="full-width-wrapper">
 <!-- Section content -->
</div>

Dann kannst du den CSS Editor verwenden oder die base.css Datei verwenden und den folgenden Code ergänzen - so wird sichergestellt, dass dein Bild mit Text auf allen Bildschirmgrößen die volle Breite einnimmt.

.full-width-wrapper {
 width: 100%;
 max-width: 100%;
}

Bei weiteren Fragen dazu hoffe ich dass du verstehen kannst dass du mit einem unserer Experten das weiter besprechen müsstest und diese Experten findest du in unserem Leitfaden hier. Gebe auch ein Suchbegriff diesbzgl. oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Oder lass wissen, wenn du weitere Fragen dazu hast oder zum Shop und Business und gerne können wir das hier weiter besprechen! Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Litecard]

danke für deine Antwort,

ich habe alles gemacht was sie beschriben haben aber komme nicht weiter da ich den Code trotz suchzeile nicht finde?

<div class="wrapper">
 <!-- Section content -->
</div>

[Gabe]

Hey @Litecard 

Leider habe ich wenig Einsicht in deine Liquid Dateien und das würde einiges an Arbeit verlangen deine Code Files entsprechend anzupassen. Deshalb werde ich hier nochmal einen Experten sehr empfehlen der/die in dein Code in einer Testumgebung eintauchen kann und das für dich einrichten, genau so wie du es haben möchtest. Es geht hier ja auch darum die Integrität deines Themes zu erhalten denn man möchte ja nicht einen Fehler machen und dein Theme Code komplett zerschießen.

Ich hoffe du kannst also verstehen, dass es nicht so einfach ist von hier aus dir eine komplette Coding Lösung anbieten zu können ohne einen Deep-Dive in dein Code machen zu können.

Hast du schon einen Experten der/die das machen kann? Wenn nicht dann kostet eine E-Mail an diese Experten hier nichts, und die antworten meist sehr schnell!