# Wie Abstände von Titel und Preis in der Artikelübersicht verringern? **URL:** \ **Category:** Themes & Design\ **Created:** [6. Januar 2018 um 09:50 UTC](https://forum.shopware.com/t/wie-abstande-von-titel-und-preis-in-der-artikelubersicht-verringern/50304 "2018-01-06T09:50:16Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![spoleraner](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@spoleraner](https://forum.shopware.com/u/spoleraner)\ **Post date:** [6. Januar 2018 um 09:50 UTC](https://forum.shopware.com/t/wie-abstande-von-titel-und-preis-in-der-artikelubersicht-verringern/50304/1 "2018-01-06T09:50:16Z")
Liebe Community, ich verzweifel hier gerade an einer eigentlch einfachen Aufgabe. Und zwar möchte ich in der Artikelübersicht den Titel & Preis zentrieren. Anschließend die Abstände dazwischen verringern und die Rating Stars entfernen. Ich habe dazu in meinem Template die Datei product-box.less angelegt und geändert. Das zentrieren des Titels funktioniert problemlos. Die Schriftgrößes des Titels, des Preises sowie die Randstärke der Box konnte ich erfolgreich ändern. Was ich aber auch versuche der Preis wird nicht zentriert. Ich nutze die Minimal Ansicht im Product Listing und habe dort folgendes eingefügt.  .product–price-info {  text-align: center; } Was ich auch mache er nimmt es nicht an. Nach dem komplilieren bleibt alles beim alten.  Das gilt auch, wenn die Rating Stars einfach aus der product-box.less lösche. Ich fürchte ich stehe hier gerade voll auf dem Schlauch und hoffe, dass mir jemand helfen kann.   ---
**Author:** ![NextMike](https://avatars.discourse-cdn.com/v4/letter/n/838e76/32.png) [@NextMike](https://forum.shopware.com/u/NextMike)\ **Post date:** [6. Januar 2018 um 10:40 UTC](https://forum.shopware.com/t/wie-abstande-von-titel-und-preis-in-der-artikelubersicht-verringern/50304/2 "2018-01-06T10:40:50Z")
Ausblenden geht mit display:none; nicht mit dem Löschen aus der Datei. Wenn Du schon die Schriftgröße der Preises geändert hast, kannst Du es auch dort zentrieren. ---
**Author:** ![spoleraner](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@spoleraner](https://forum.shopware.com/u/spoleraner)\ **Post date:** [6. Januar 2018 um 13:55 UTC](https://forum.shopware.com/t/wie-abstande-von-titel-und-preis-in-der-artikelubersicht-verringern/50304/3 "2018-01-06T13:55:10Z")
Hallo NextMike, super das klappt schon mal, vielen Dank 🙂 Ein Problem weniger. Jetzt würde ich gerne noch den Preis zentrieren und den Abstand zwischen Titel und Preis verringern. In diesem Block .price–default {             .unitize(font-size, 14);             .unitize(line-height, 20);             .unitize-margin(0, 5, 0, 0);             vertical-align: bottom;             float: center; kann ich doch die Schriftgröße des Preises anpassen. Wenn ich dort ein „text-align: center;“ einsetze, zentriert er diesen einfach nicht. Ist das die falsche Stelle? ---
**Author:** ![NextMike](https://avatars.discourse-cdn.com/v4/letter/n/838e76/32.png) [@NextMike](https://forum.shopware.com/u/NextMike)\ **Post date:** [6. Januar 2018 um 14:45 UTC](https://forum.shopware.com/t/wie-abstande-von-titel-und-preis-in-der-artikelubersicht-verringern/50304/4 "2018-01-06T14:45:38Z")
Zentriere .product–box .product–price dann geht es. ---
**Author:** ![spoleraner](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@spoleraner](https://forum.shopware.com/u/spoleraner)\ **Post date:** [6. Januar 2018 um 15:06 UTC](https://forum.shopware.com/t/wie-abstande-von-titel-und-preis-in-der-artikelubersicht-verringern/50304/5 "2018-01-06T15:06:50Z")
das habe ich schon versucht. Ich habe im Forum auch schon eine ähnliche Hilfestellung gefunden. ich habe zum Test jede .product–box { und .product–price-info { um ein text-align: center; ergänzt. Leider bleibt der Preis immer linksbündig. Irgendwas mache ich offenbar falsch. ich dachte, dass die less Datei wie folgt geändert werden müssten:     .product–price-info {      **text-align: center;**   .product–box {      **text-align: center;**     .clearfix();     display: block;     width: 100%;     padding: 2% 0 0 2%;     float: left;   ---
**Author:** ![NextMike](https://avatars.discourse-cdn.com/v4/letter/n/838e76/32.png) [@NextMike](https://forum.shopware.com/u/NextMike)\ **Post date:** [6. Januar 2018 um 15:11 UTC](https://forum.shopware.com/t/wie-abstande-von-titel-und-preis-in-der-artikelubersicht-verringern/50304/6 "2018-01-06T15:11:48Z")
Ich hatte .product–box .product–price geschrieben. > ---
**Author:** ![spoleraner](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@spoleraner](https://forum.shopware.com/u/spoleraner)\ **Post date:** [6. Januar 2018 um 15:22 UTC](https://forum.shopware.com/t/wie-abstande-von-titel-und-preis-in-der-artikelubersicht-verringern/50304/7 "2018-01-06T15:22:15Z")
entschuldige, das hatte ich aber schon versucht. Ich hatte die Zeile wie folgt geändert: .product–price {         text-align: center;         .unitize-height(20);   Ergebnis ist das selber. Der Preis bleibt links. Habe ich das eventuell falsch platziert?   ---
**Author:** ![NextMike](https://avatars.discourse-cdn.com/v4/letter/n/838e76/32.png) [@NextMike](https://forum.shopware.com/u/NextMike)\ **Post date:** [6. Januar 2018 um 15:38 UTC](https://forum.shopware.com/t/wie-abstande-von-titel-und-preis-in-der-artikelubersicht-verringern/50304/8 "2018-01-06T15:38:19Z")
Das passt so. Man müsste sich mal das Ganze anschauen. ---
**Author:** ![spoleraner](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@spoleraner](https://forum.shopware.com/u/spoleraner)\ **Post date:** [6. Januar 2018 um 16:12 UTC](https://forum.shopware.com/t/wie-abstande-von-titel-und-preis-in-der-artikelubersicht-verringern/50304/9 "2018-01-06T16:12:47Z")
komisch, dass die Änderungen bei der Schriftgröße sowie der Ausblendung der Rating Stars funktionieren… Spielt es eine Rolle, welche Listing Ansicht man im Backend eingestellt hat (bei mir Minimal) ? Hilft es den Inhalt der less Datei mal zu posten? Haben Sie eine Idee, wie sich die Abstände zwischen dem Titel und den Preis veringern lassen? ---
**Author:** ![malzfons](https://avatars.discourse-cdn.com/v4/letter/m/58956e/32.png) [@malzfons](https://forum.shopware.com/u/malzfons)\ **Post date:** [6. Januar 2018 um 20:23 UTC](https://forum.shopware.com/t/wie-abstande-von-titel-und-preis-in-der-artikelubersicht-verringern/50304/10 "2018-01-06T20:23:09Z")
Du musst die Änderung dann auch unter Box minimal machen. ---
**Author:** ![spoleraner](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@spoleraner](https://forum.shopware.com/u/spoleraner)\ **Post date:** [6. Januar 2018 um 21:15 UTC](https://forum.shopware.com/t/wie-abstande-von-titel-und-preis-in-der-artikelubersicht-verringern/50304/11 "2018-01-06T21:15:33Z")
Hi daran hatte ich auch gedacht aber das hilft auch nichts. Hier mal der Ausschnitt aus der .box–minimal .box–minimal {     width: 50%;     .product–image {         .unitize-height(120);     }     .product–price-info {         .unitize-height(70);         .price–unit {             .unitize-height(30);             .unitize(font-size, 10);             .unitize(line-height, 14);             display: block;         }     }     .product–price-outer {         .unitize-height(40);         position: relative;     }     .product–price {          **text-align: center;**         .unitize(line-height, 20);         position: absolute;         bottom: 0; left: 0;         height: auto;   USW. ---
**Author:** ![spoleraner](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@spoleraner](https://forum.shopware.com/u/spoleraner)\ **Post date:** [6. Januar 2018 um 21:29 UTC](https://forum.shopware.com/t/wie-abstande-von-titel-und-preis-in-der-artikelubersicht-verringern/50304/12 "2018-01-06T21:29:02Z")
wenn ich das Product Layout von „Nur wichtige Informationen“ auf „Großes Bild“ ändere, dann läuft es und der Preis wird zentriert dargestellt. Wenn ich das wieder zurück auf „Nur wichtige Informationen“ stelle und den Cache leere, dann erscheint der Preis in der Darstellung wieder linksbündig.   Ist für dieses Produktlayout eventuell eine ganz andere Datei zuständig als die product-box.less? ---
**Author:** ![spoleraner](https://avatars.discourse-cdn.com/v4/letter/s/b5ac83/32.png) [@spoleraner](https://forum.shopware.com/u/spoleraner)\ **Post date:** [6. Januar 2018 um 21:57 UTC](https://forum.shopware.com/t/wie-abstande-von-titel-und-preis-in-der-artikelubersicht-verringern/50304/13 "2018-01-06T21:57:21Z")
Ich habe das nun anders gelöst. in der Layoutansicht “Großes Bild” gewählt (hier funktioniert es ja) und anschließend in der less Datei die Spalten von 33,3% auf 20% reduziert. So wird es in der Desktop Ansicht auch fünf spaltig und alles zentriert. Noch den “Vergleich” im Backend deaktiviert und ich erhalte fast mein Wunschergebnis. Einzig ein großer Abstand von ca. 2 Zeilen habe ich jetzt zwischen dem Produktbild und dem Titel. Da wäre ich für einen Tipp dankbar, wie sich dieser verringern läßt? ---
**Author:** ![malzfons](https://avatars.discourse-cdn.com/v4/letter/m/58956e/32.png) [@malzfons](https://forum.shopware.com/u/malzfons)\ **Post date:** [7. Januar 2018 um 07:14 UTC](https://forum.shopware.com/t/wie-abstande-von-titel-und-preis-in-der-artikelubersicht-verringern/50304/14 "2018-01-07T07:14:54Z")
Ich glaube das mit den produktboxen ist auch zusätzlich von den bildschirmbreiten abhängig. Manche Änderungen greifen da in die andere breite mit über so dass man die Änderungen dort zusätzlich noch machen muss. Aber wo und wie ist natürlich ne Sucherei. Responsive  ---
**Author:** ![vali](https://avatars.discourse-cdn.com/v4/letter/v/839c29/32.png) [@vali](https://forum.shopware.com/u/vali)\ **Post date:** [27. Mai 2018 um 09:04 UTC](https://forum.shopware.com/t/wie-abstande-von-titel-und-preis-in-der-artikelubersicht-verringern/50304/15 "2018-05-27T09:04:54Z")
stehe gerade vor dem selben Problem… im Produkt Layout “Nur wichtige Informationen” kriege ich es einfach nicht hin den Preis mittig zu setzen, bei den anderen Layouts lässt es sich problemlos anpassen… @spolerane‍ hast du es inzwischen hinbekommen? oder jemand noch ne Idee was man ändern könnte? ---
**Author:** ![SmartStylez](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@SmartStylez](https://forum.shopware.com/u/SmartStylez)\ **Post date:** [30. Dezember 2019 um 17:37 UTC](https://forum.shopware.com/t/wie-abstande-von-titel-und-preis-in-der-artikelubersicht-verringern/50304/16 "2019-12-30T17:37:32Z")
Hat das Abstandproblem im Listing denn schon jemand lösen können? Mir ist der Platz zwischen Artikelname und Preis einfach zu groß. ---
**Author:** ![NextMike](https://avatars.discourse-cdn.com/v4/letter/n/838e76/32.png) [@NextMike](https://forum.shopware.com/u/NextMike)\ **Post date:** [31. Dezember 2019 um 10:41 UTC](https://forum.shopware.com/t/wie-abstande-von-titel-und-preis-in-der-artikelubersicht-verringern/50304/17 "2019-12-31T10:41:03Z")
Wird ja wohl lösbar sein. Wenn Du es machen möchtest, arbeite Dich mal ein: [https://docs.shopware.com/de/shopware-5-de/tutorials-und-faq/aenderungen-am-template-vornehmen](https://docs.shopware.com/de/shopware-5-de/tutorials-und-faq/aenderungen-am-template-vornehmen) [https://wiki.selfhtml.org/wiki/CSS](https://wiki.selfhtml.org/wiki/CSS)