Oberer Abstand einer Einkaufswelt

Ich muß auf der Startseite verschiedene Einkaufswelten erstellen. 1. Mit Banner-Slider und Banner (Resizable) 2. Mit Artikel (Resizable) 3. Html-Element (Masonry) Die Elemente kann ich nicht in eine Einkaufswelt packen, da ich das Html-Element unbedingt in Masonry-Effekt machen, damit man die Schrift bei Mobilgeräten überhaupt noch lesen kann. Die anderen Elemente muß ich in Resizable machen, damit sie sich anpassen können. Wenn ich nun eine Einkaufswelt unter die andere setze, liegen diese Stoß auf Stoß aufeinander. Ich habe also keinen Abstand. Wie kann ich einen Abstand (z. B. 10px) zu den einzelnen Einkaufswelten herstellen?

Hi, hast Du das schon gelöst? Ich habe auch das Problem.

Hallo Petra, ich habe mir jetzt so beholfen, indem ich eine zusätzliche sogenannte ‚Leere Einkaufswelt‘ mit Zeilenhöhe 10px jeweils dazwischen geschoben habe.

Ich mag mich täuschen, aber so wie es im Quelltext aussieht, ist jede Einkaufswelt in einem

mit der Klasse „emotion–wrapper“ gekapselt. Wenn dem so ist, einfach der CSS-Class „emotion–wrapper“ ein „margin-bottom: 10px“ verpassen ,also einen unteren Abstand. .emotion--wrapper { .unitize(margin-bottom, 10); }

1 Like

Hallo Carsten, hattest recht. Das ist natürlich die elegantere Lösung. Habe jetzt im eigenen Theme in der emotion.less folgendes eingetragen: [quote] // Emotion wrapper .emotion–wrapper { .unitize(margin-bottom, 10); }[/quote] Somit konnte ich die leeren Einkaufswelten wieder löschen. Vielen Dank für den Tipp!

1 Like

Danke an Euch!! :wink:

Hallo jox, kannst Du bitte einem “outsider”, wie ich, etwas genauer erklären, wie Du das gemacht hast. Wo, welchen Ordner und welche Datei hast Du mit diesem Inhalt angelegt? Danke!

@sonic das sollte doch eigentlich bei jeden funktionieren oder, verstehe einfach nicht warum das bei mir nicht klappt bei dem gleichen problem