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: Bilder verrückt auf Contentseite

Gelöst

Bilder verrückt auf Contentseite

AmorisMUNDI
Neues Mitglied
4 0 0

Hallo,

es geht z.B. um diese Seite: https://www.amorismundi.de/pages/plant-for-the-planet

Ich verstehe nicht warum die Bilder auf dem Desktop nach links eingerückt angezeigt werden? Mobil ist alles ok und wenn man das Fenster auf dem Desktop kleiner zieht wird es irgendwann auch richtig dargestellt.

Shopify selbst meint es gibt einen Code, der dafür verantwortlich ist, aber da es um einen mit dem Rich-Text Editor erstellten Inhalt geht wollen Sie mir nicht helfen...

Kann jemand dieses Problem lösen oder mir sagen was ich wo anpassen muss?

Liebe Grüße

Daniel

2 AKZEPTIERTE LÖSUNGEN

Gabe
Shopify Staff
19233 3005 4430

Erfolg.

Hey @AmorisMUNDI 

Danke für die URL und das sieht nicht besonders gut aus, da hast du recht! Leider werden Anpassungen des RTE Editor von unserem Core Support Team nicht unterstützt, wie du bereits erlebt hast...aber dafür ist ja die Community als Ersatz da 😉 Hoffentlich finden wir eine Lösung und ggf. kann einer unserer Programmierer hier etwas dazu sagen, wie z. B. @r8r.

Page Builder Apps als Ersatz?

Apropos, der RTE wird wahrscheinlich bald ausdienen denn in dieser Fassung bietet er derzeit keine tolle UX an. Ein neuer könnte ähnlich aussehen wie die Editors unserer Page Builder Apps, wie z. B. die von @PageFly-Victor oder Shogun. Hast du die schon ausprobiert? Mit diesen kannst du viel professioneller-aussehende Content Pages erstellen mit einem Wow-Faktor. Der RTE bietet das derzeit nicht an (ausser man hat fortgeschrittene HTML Kenntnisse).

Wie das Theme funktioniert

Es scheint das Problem was du veranschaulichst ist eine Eigenartigkeit deines Themes (Brooklyn?) Wenn du ein anderes Theme, wie Debut, in deiner Bibliothek hinzufügst und dann die Seite da betrachtest, wird alles wahrscheinlich normal in der Ausrichtung aussehen, stimmt's? Ich sehe auch viel Markup im HTML dieses Texts und der Bilder. Wurde das "As is" von woanders in den WYSIWYG RTE Editor reinkopiert?

Du könntest 1) versuchen den Text und die Bilder ohne Copy & Paste einzubauen mit so wenig Markup wie möglich, als "Barebone" HTML sozusagen. Oder den ganzen Markup herausnehmen. Aber garantiert ist es immer noch nicht ob das klappen wird.

Oder 2) die Bilder in der Ausrichtung ändern:

image.png

DIY im Code

Folgendes ist ein Tipp den ich von unserem PageFly Kollegen "geborgt" habe um das Einrücken oder Ausrücken der Bilder abzuschalten. Du kannst es somit DIY (do-it-yourself) im Code probieren, aber immer zuerst in einer Themekopie

  • Themes => code bearbeiten => asset => theme.scss.liquid

Füge ganz unten den folgenden Code Snippet hinzu und speichere das und prüfe ob das dann geht:

.rte--indented-images img:not([style]), 
.rte--indented-images img[style="float: none;"] {
    max-width: 100%!important;
    margin: 0!important;
}

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

r8r
Shopify Partner
2555 327 943

Erfolg.

@AmorisMUNDI – der @Gabe hat das richtig erkannt.

Im Endeffekt würd ich den gehighlighteten Code aus der timber.scss entfernen:

Screenshot 2021-09-15 at 15.47.12.jpg

Hast Du hier Unterstützung beim Aufbau der Seite gehabt?

LG, Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte

Lösung in ursprünglichem Beitrag anzeigen

5 ANTWORTEN 5

Gabe
Shopify Staff
19233 3005 4430

Erfolg.

Hey @AmorisMUNDI 

Danke für die URL und das sieht nicht besonders gut aus, da hast du recht! Leider werden Anpassungen des RTE Editor von unserem Core Support Team nicht unterstützt, wie du bereits erlebt hast...aber dafür ist ja die Community als Ersatz da 😉 Hoffentlich finden wir eine Lösung und ggf. kann einer unserer Programmierer hier etwas dazu sagen, wie z. B. @r8r.

Page Builder Apps als Ersatz?

Apropos, der RTE wird wahrscheinlich bald ausdienen denn in dieser Fassung bietet er derzeit keine tolle UX an. Ein neuer könnte ähnlich aussehen wie die Editors unserer Page Builder Apps, wie z. B. die von @PageFly-Victor oder Shogun. Hast du die schon ausprobiert? Mit diesen kannst du viel professioneller-aussehende Content Pages erstellen mit einem Wow-Faktor. Der RTE bietet das derzeit nicht an (ausser man hat fortgeschrittene HTML Kenntnisse).

Wie das Theme funktioniert

Es scheint das Problem was du veranschaulichst ist eine Eigenartigkeit deines Themes (Brooklyn?) Wenn du ein anderes Theme, wie Debut, in deiner Bibliothek hinzufügst und dann die Seite da betrachtest, wird alles wahrscheinlich normal in der Ausrichtung aussehen, stimmt's? Ich sehe auch viel Markup im HTML dieses Texts und der Bilder. Wurde das "As is" von woanders in den WYSIWYG RTE Editor reinkopiert?

Du könntest 1) versuchen den Text und die Bilder ohne Copy & Paste einzubauen mit so wenig Markup wie möglich, als "Barebone" HTML sozusagen. Oder den ganzen Markup herausnehmen. Aber garantiert ist es immer noch nicht ob das klappen wird.

Oder 2) die Bilder in der Ausrichtung ändern:

image.png

DIY im Code

Folgendes ist ein Tipp den ich von unserem PageFly Kollegen "geborgt" habe um das Einrücken oder Ausrücken der Bilder abzuschalten. Du kannst es somit DIY (do-it-yourself) im Code probieren, aber immer zuerst in einer Themekopie

  • Themes => code bearbeiten => asset => theme.scss.liquid

Füge ganz unten den folgenden Code Snippet hinzu und speichere das und prüfe ob das dann geht:

.rte--indented-images img:not([style]), 
.rte--indented-images img[style="float: none;"] {
    max-width: 100%!important;
    margin: 0!important;
}

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

r8r
Shopify Partner
2555 327 943

Erfolg.

@AmorisMUNDI – der @Gabe hat das richtig erkannt.

Im Endeffekt würd ich den gehighlighteten Code aus der timber.scss entfernen:

Screenshot 2021-09-15 at 15.47.12.jpg

Hast Du hier Unterstützung beim Aufbau der Seite gehabt?

LG, Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte
AmorisMUNDI
Neues Mitglied
4 0 0

Vielen Dank!

Ich habe den Code von @Gabe eingefügt und das hat funktioniert.

 

Unterstützung beim Aufbau hatte ich nicht wirklich, ist mein erster Shop und soweit versuche ich alles selbst aufzubauen 🙂

Gabe
Shopify Staff
19233 3005 4430

Super freut mich @AmorisMUNDI 

Und du hast hier mit uns eine Plattform wo deine Fragen immer stellen sowie Probleme schildern kannst!

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

r8r
Shopify Partner
2555 327 943

@AmorisMUNDI – mich wundert, dass dieser timber-Code diesen Nebeneffekt hat … eigentlich ist das eine recht gute Bibliothek … darum meine Frage 😉

Aber Gratulation!
Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte