Ein Nutzer hat ein Metafeld unter “Benutzerdefinierte Daten → Produkte” angelegt, das unterhalb des Produktbildes zusätzlichen Text anzeigen soll. Problem: Das Metafeld füllt nicht die gesamte verfügbare Breite des übergeordneten “Rich Text Feldes” aus.
Vorgeschlagene Lösung:
full-width zum Metafeld-Container.full-width {
width: 100%;
}
Mögliche Ursache: Der Text könnte durch <br>-Tags oder eingefügte Formatierung von externen Quellen verkürzt werden.
Status: Der Fragesteller benötigt weitere Anleitung, wo genau die CSS-Klasse im Code hinzugefügt werden soll. Ein Verweis auf verlinkte Help-Dokumentation wurde gegeben.
Hallo zusammen,
ich habe unter Benutzerdefinierte Daten → Produkte ein Metafeld angelegt, welches im Produkt unterhalb des Bildes angezeigt wird. (Um zusätzlichen Produkttext zu erstellen). Dieses Metafeld hat aber nur eine bestimmte Breite und füllt nicht die gesamte Breite des übergeordneten “Rich Text Feldes” aus. Kann ich irgendwie einstellen, dass das Feld die gesamte Breite ausfüllt?
Hier ein Screenshot zum besseren Verständnis:
Hey @LaserPlus
Kann es sein dass der Text bzw. die Textzeilen mit <br> Tags, sprich, Zeilenumbrüche verkürzt wird/werden (siehe Code unten)? Hast du den Text beispielsweise von einer externen Quelle 1:1 da per copy & paste eingefügt? Falls ja hast du auch die Formatierung ggf. mit eingefügt.
Wenn nicht, um sicherzustellen, dass das Metafeld die gesamte Breite des übergeordneten “Rich Text Feldes” ausfüllt, kannst du CSS verwenden. Hier sind einige Schritte, die du unternehmen kannst, um dies zu erreichen. Du kannst dem div, das das Metafeld enthält, eine spezielle CSS-Klasse hinzufügen, die die Breite auf 100% setzt.
Füge eine Klasse, wie full-width, zu deinem Metafeld-Container hinzu:
Schnell, einfach und professionell kommunizieren – das Avery Zweckform
Formularbuch 1020 Kurzbrief macht es möglich! Mit diesem praktischen
Formularbuch können Sie Ihre Kurzbriefe im Handumdrehen erstellen. Dank
der vorgedruckten Felder für Absender, Empfänger, Betreff und Text
sparen Sie Zeit und können sich auf das Wesentliche konzentrieren. Die
hochwertigen Avery Zweckform Formulare garantieren zudem eine saubere
und professionelle Optik. Ob im Büro oder unterwegs – dieses
Formularbuch ist der ideale Begleiter für alle Ihre geschäftlichen
Korrespondenzen. Überzeugen Sie sich selbst von der Qualität und
Effizienz des Avery Zweckform Formularbuchs 1020 Kurzbrief!
Füge diesen CSS-Code zu den Theme-Einstellungen hinzu:
.full-width {
width: 100%;
}
Dieser CSS-Code stellt sicher, dass das div mit der Klasse full-width die gesamte verfügbare Breite des übergeordneten Containers einnimmt. Überprüfe auch die Darstellung deiner Seite und stelle sicher, dass das Metafeld nun die gesamte Breite ausfüllt. Falls nicht, kann es sein, dass andere CSS-Regeln die Breite beeinflussen. Du kannst den CSS-Code weiter anpassen, um sicherzustellen, dass alle Container die gewünschte Breite einnehmen:
.rich-text__wrapper .full-width {
width: 100%;
}
Hoffe das hilft dir weiter - lass wissen falls nicht! 
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas 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.
Hallo Gabe,
klingt soweit gut und logisch. Wo kann ich dem Metafeld-Container denn die Klasse zufügen? Wird das im “Code” gemacht? Falls ja, welche Datei würde dafür in Frage kommen?
Oder kann ich das noch an anderer Stelle machen?
Gruß
Marco