# Einkaufswelt Zeilenabstand pro Breakpoint **URL:** \ **Category:** Allgemein\ **Created:** [6. April 2021 um 09:42 UTC](https://forum.shopware.com/t/einkaufswelt-zeilenabstand-pro-breakpoint/86668 "2021-04-06T09:42:17Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![skarpeta](https://avatars.discourse-cdn.com/v4/letter/s/ac91a4/32.png) [@skarpeta](https://forum.shopware.com/u/skarpeta)\ **Post date:** [6. April 2021 um 09:42 UTC](https://forum.shopware.com/t/einkaufswelt-zeilenabstand-pro-breakpoint/86668/1 "2021-04-06T09:42:17Z")
Gibt es die Möglichkeit in den Einkaufswelten den Zeilenabstand variabel pro Breakpoint zu setzen? Also das es am Handy z.B. nur 10 sind und am Desktop erst 30? Im Screenshot sieht man nochmal welchen Abstand ich meine. ![Bildschirmfoto 2021-04-06 um 11.37.45](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/7/7a1c791186952f660c27f1243e9035e7bf041ae0.png) ---
**Author:** ![R4M](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/r4m/32/9983_2.png) [@R4M](https://forum.shopware.com/u/R4M)\ **Post date:** [6. April 2021 um 09:48 UTC](https://forum.shopware.com/t/einkaufswelt-zeilenabstand-pro-breakpoint/86668/2 "2021-04-06T09:48:59Z")
Per Einstellungen vielleicht nicht, aber über CSS sollt es ggf. gehen. ---
**Author:** ![skarpeta](https://avatars.discourse-cdn.com/v4/letter/s/ac91a4/32.png) [@skarpeta](https://forum.shopware.com/u/skarpeta)\ **Post date:** [6. April 2021 um 09:57 UTC](https://forum.shopware.com/t/einkaufswelt-zeilenabstand-pro-breakpoint/86668/3 "2021-04-06T09:57:35Z")
Leider nein. Habe ich vergessen dazu zu schreiben. Es wird inline gesetzt und kann ich daher nicht über eine Klasse etc. überschreiben. ---
**Author:** ![R4M](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/r4m/32/9983_2.png) [@R4M](https://forum.shopware.com/u/R4M)\ **Post date:** [6. April 2021 um 10:13 UTC](https://forum.shopware.com/t/einkaufswelt-zeilenabstand-pro-breakpoint/86668/4 "2021-04-06T10:13:26Z")
Du hast es noch nicht versucht. Beispiel: ``` ``` ---
**Author:** ![skarpeta](https://avatars.discourse-cdn.com/v4/letter/s/ac91a4/32.png) [@skarpeta](https://forum.shopware.com/u/skarpeta)\ **Post date:** [27. April 2021 um 13:48 UTC](https://forum.shopware.com/t/einkaufswelt-zeilenabstand-pro-breakpoint/86668/5 "2021-04-27T13:48:46Z")
Falls noch jemand danach sucht, mittlerweile habe ich eine „Lösung“ gefunden. ``` // 1. Zeile – 2 hoch .start-row-xl-1 { &.row-xl-2 { height: calc(~"50vw - 15px") !important; top: 0 !important; } } // 1. Zeile – 1 hoch .start-row-xl-1 { &.row-xl-1 { height: calc(~"25vw - 3.75px") !important; top: 0 !important; } } // 2. Zeile – 2 hoch .start-row-xl-2 { &.row-xl-2 { height: calc(~"50vw - 15px") !important; top: calc(~"0.5 * (50vw - 15px)") !important; } } // 2. Zeile – 1 hoch .start-row-xl-2 { &.row-xl-1 { height: calc(~"25vw - 3.75px") !important; top: calc(~"0.5 * (50vw - 15px)") !important; } } // 3. Zeile – 2 hoch .start-row-xl-3 { &.row-xl-2 { height: calc(~"50vw - 15px") !important; top: calc(~"1 * (50vw - 15px)") !important; } } // 3. Zeile – 1 hoch .start-row-xl-3 { &.row-xl-1 { height: calc(~"25vw - 3.75px") !important; top: calc(~"1 * (50vw - 15px)") !important; } } ``` Man muss aber beachten: Das wird dann auf jede EK angewandt, daher braucht man also z.B. noch dieses Plugin [Einkaufswelten Plus | Erlebniswelten | Erweiterungen | Shopware Store](https://store.shopware.com/nnweb62674931959/einkaufswelten-plus.html) um der Einkaufswelt eine Klasse zu geben. Mein Code bezieht sich nur auf Elemente die ein oder zwei „Blöcke“ (Reihen) hoch sind. Dementsprechend muss man alles für mögliche Größen die man so hat weiter berechnen und natürlich nicht ab Zeile 2 aufhören sondern es so lange weiter führen wie man vermutlich Zeilen hat. Außerdem ist der Ausschnitt nur für Desktop. Für die anderen Viewports muss man dann noch extra die anderen Klasse ansprechen. Also: - Mobile: .start-row-xs-1 - Mobile Landscape: .start-row-s-1 - Tablet: .start-row-m-1 - Tablet Landscape: .start-row-l-1 - Desktop: .start-row-xl-1 Damit die Einkaufswelt aber nicht länger ist als die tatsächlichen rows die man hat kann man dies dann auch noch mit jQuery beheben: ``` // Einkaufswelten Höhe anhand von rows berechnen $(document).ready(function() { // Mobile emotion __sizer_xs__ size = $('.emotion--sizer-xs').data('rows'); $('.emotion--sizer-xs').css({height: 'calc(' + emotion __sizer_xs__ size + ' * (50vw - 3.75px) )'}); // Mobile landscape emotion __sizer_s__ size = $('.emotion--sizer-s').data('rows'); $('.emotion--sizer-s').css({height: 'calc(' + emotion __sizer_s__ size + ' * (50vw - 3.75px) )'}); // Tablet emotion __sizer_m__ size = $('.emotion--sizer-m').data('rows'); $('.emotion--sizer-m').css({height: 'calc(' + emotion __sizer_m__ size + ' * (50vw - 7.5px) )'}); // Tablet Landscape emotion __sizer_l__ size = $('.emotion--sizer-l').data('rows'); $('.emotion--sizer-l').css({height: 'calc(' + emotion __sizer_l__ size + ' * (25vw - 1.875px) )'}); // Desktop emotion __sizer_xl__ size = $('.emotion--sizer-xl').data('rows'); $('.emotion--sizer-xl').css({height: 'calc(' + emotion __sizer_xl__ size + ' * (25vw - 1.875px) )'}); }); ``` Das Javascript muss aber leider innerhalb der Einkaufswelt geladen werden, da diese per Ajax geladen wird. Also entweder ein extra Codeblock mit dem Script oder es irgendwie schaffen es erst ausführen zu lassen wenn die Einkaufswelt fertig geladen ist. Dazu habe ich leider noch keine Lösung. Falls da jemand etwas weiß gerne bescheid geben. Sicherlich nicht die beste Lösung, falls jemand Optimierungsvorschläge hat sehr gerne. Ich poste es nur hier nur als kleine Hilfe zum herum probieren mit der Einkaufswelt.