# 3 spaltiges Listing

**URL:** https://forum.shopware.com/t/3-spaltiges-listing/50693
**Category:** Themes & Design
**Created:** [26. Januar 2018 um 11:52 UTC](https://forum.shopware.com/t/3-spaltiges-listing/50693 "2018-01-26T11:52:20Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![heavenlystore](https://avatars.discourse-cdn.com/v4/letter/h/c37758/32.png) [@heavenlystore](https://forum.shopware.com/u/heavenlystore)
#### Post date: [26. Januar 2018 um 11:52 UTC](https://forum.shopware.com/t/3-spaltiges-listing/50693/1 "2018-01-26T11:52:20Z")

</div>

Ich möchte in meinem Shop ein 3 spaltiges Listing haben. Ich habe bereits eine Ableitung meines gekauften Themes erstellt und in dieser Ableitung eine all.less Datei unter “theme-\>frontend-\>Name der Ableitung-\>frontend-\>public-\>src-\>less” erstellt. In dieser all.less Datei habe ich auf die, im Ordner modules befindliche, neu erstelle product-box.less Datei verwiesen. In dieser product-box.less Datei habe ich folgendes reingeschrieben:&nbsp; .box–image { &nbsp; &nbsp; width: 33.3%; } Trotzdem wird im Frontend keine Änderung übernommen. Was habe ich falsch gemacht?

---

<div class="post-metadata">

### Author: ![simkli](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/simkli/32/13124_2.png) [@simkli](https://forum.shopware.com/u/simkli)
#### Post date: [26. Januar 2018 um 12:19 UTC](https://forum.shopware.com/t/3-spaltiges-listing/50693/2 "2018-01-26T12:19:40Z")

</div>

Das geht nicht so einfach. Wenn du eiskalt 33.3% einträgst, gilt dies auch für ein Smartphone. Dann hast du auf dem Minidisplay 3 Produkte nebeneinader gequetscht. Das will doch niemand. Stelle bei der Kategorie doch mal das Produkt-Layout auf „großes Bild“. Dann ist es dreispaltig im Desktop. Vielleicht reicht das ja schon.  
Viele Grüße

---

<div class="post-metadata">

### Author: ![brettvormkopp](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/brettvormkopp/32/7788_2.png) [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)
#### Post date: [26. Januar 2018 um 12:29 UTC](https://forum.shopware.com/t/3-spaltiges-listing/50693/3 "2018-01-26T12:29:21Z")

</div>

Mit media queries kannst du festlegen ab welchem Gerät der User die Änderung sehen soll:

```
@media screen and(min-width: @phoneLandscapeViewportWidth){
  /*mache nichts*/
}
@media screen and(min-width: @tabletViewportWidth){
  /*mache nichts*/
}
@media screen and(min-width: @tabletLandscapeViewportWidth){
  /*mache nichts*/
}
@media screen and(min-width: @desktopViewportWidth){
  /*falls du die minimal Anzeige nutzt*/
  .box--minimal{
    width: 33.333%
  }
}

```

&nbsp;