FROM CACHE - de_header

Bilder verrückt auf Contentseite

Gelöst
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

Anerkannte Lösungen
Gabe
Shopify Staff
Shopify Staff
7412 1187 1918

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 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 Expert
2350 305 834

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
Shopify Staff
7412 1187 1918

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 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 Expert
2350 305 834

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
Shopify Staff
7412 1187 1918

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 Expert
2350 305 834

@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