# 2 Artikel nebeneinander in der Mobilen Ansicht anzeigen **URL:** \ **Category:** Themes & Design\ **Created:** [20. Januar 2021 um 23:30 UTC](https://forum.shopware.com/t/2-artikel-nebeneinander-in-der-mobilen-ansicht-anzeigen/72237 "2021-01-20T23:30:09Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![NeoRetro](https://avatars.discourse-cdn.com/v4/letter/n/ed8c4c/32.png) [@NeoRetro](https://forum.shopware.com/u/NeoRetro)\ **Post date:** [20. Januar 2021 um 23:30 UTC](https://forum.shopware.com/t/2-artikel-nebeneinander-in-der-mobilen-ansicht-anzeigen/72237/1 "2021-01-20T23:30:09Z")
Hallo Zusammen, ich suche eine Lösung oder Plugin für die Möglichkeit in der Mobilen Ansicht 2 Artikel nebeneinander Anzeigen zu lassen.  Die Mobile Darstellung bei vielen Artikeln in der Kategorie ist meiner Meinung nach nicht optimal. Bei den Vergleichen mit vielen anderen Shops sind mir sehr wenige aufgefallen die auch nur 1 Artilen anzeigen wie im Shopware Standard.    Wäre euch für einen Tipp sehr dankbar. Beste Grüße NeoRetro ---
**Author:** ![AlexBS](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@AlexBS](https://forum.shopware.com/u/AlexBS)\ **Post date:** [21. Januar 2021 um 09:21 UTC](https://forum.shopware.com/t/2-artikel-nebeneinander-in-der-mobilen-ansicht-anzeigen/72237/2 "2021-01-21T09:21:16Z")
Hallo, bei dem Problem stehe ich auch gerade. Zumindest bei meinem Theme von Themeware zwingt er alle Bootstrap Columns auf 100% in der mobilen Ansicht, obwohl ich im Template bereits die Bootstrap columns auf col-sm-6 gesetzt habe. Das ist eine CSS Geschichte. Ich werd das heute mal in Angriff nehmen und sag dir dann bescheid, wenn ich eine Lösung habe. Lg ---
**Author:** ![NeoRetro](https://avatars.discourse-cdn.com/v4/letter/n/ed8c4c/32.png) [@NeoRetro](https://forum.shopware.com/u/NeoRetro)\ **Post date:** [25. Januar 2021 um 11:30 UTC](https://forum.shopware.com/t/2-artikel-nebeneinander-in-der-mobilen-ansicht-anzeigen/72237/3 "2021-01-25T11:30:52Z")
> [@AlexBS schrieb:](https://forum.shopware.com/profile/37765/AlexBS "AlexBS") > > Hallo, > > bei dem Problem stehe ich auch gerade. Zumindest bei meinem Theme von Themeware zwingt er alle Bootstrap Columns auf 100% in der mobilen Ansicht, obwohl ich im Template bereits die Bootstrap columns auf col-sm-6 gesetzt habe. Das ist eine CSS Geschichte. Ich werd das heute mal in Angriff nehmen und sag dir dann bescheid, wenn ich eine Lösung habe. Lg Hallo Alex, vielen Dank für deine Antwort. Ich verwende aktuell noch das Standard Theme. Hast du schon etwas rausgefunden? Bin gespannt auf deine Erfahrung. lg  ---
**Author:** ![AlexBS](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@AlexBS](https://forum.shopware.com/u/AlexBS)\ **Post date:** [24. Februar 2021 um 19:49 UTC](https://forum.shopware.com/t/2-artikel-nebeneinander-in-der-mobilen-ansicht-anzeigen/72237/4 "2021-02-24T19:49:55Z")
Geht leider nicht ohne Eingriff in die TWIG Template Dateien. Dort muss man “cms-listing-col col-sm-6 col-lg-6 col-xl-4” noch die Klasse “col-6” hinzufügen. ---
**Author:** ![opalion](https://avatars.discourse-cdn.com/v4/letter/o/a587f6/32.png) [@opalion](https://forum.shopware.com/u/opalion)\ **Post date:** [24. Februar 2021 um 20:23 UTC](https://forum.shopware.com/t/2-artikel-nebeneinander-in-der-mobilen-ansicht-anzeigen/72237/5 "2021-02-24T20:23:20Z")
Ich würde das auch gut finden, da fast alle Shops zwei Artikel nebeneinander darstellen, wodurch man als User nur halb so viel scrollen bzw. nach unten swipen muss. Gibt es hier schon eine Lösung, wie das im Standard-Theme gehen könnte? ---
**Author:** ![SmartStylez](https://avatars.discourse-cdn.com/v4/letter/s/a88e4f/32.png) [@SmartStylez](https://forum.shopware.com/u/SmartStylez)\ **Post date:** [25. Februar 2021 um 12:50 UTC](https://forum.shopware.com/t/2-artikel-nebeneinander-in-der-mobilen-ansicht-anzeigen/72237/6 "2021-02-25T12:50:24Z")
Wobei ich finde, dass es dann auf dem Smartphone doch recht “eng” wirkt. ---
**Author:** ![AlexBS](https://avatars.discourse-cdn.com/v4/letter/a/ed655f/32.png) [@AlexBS](https://forum.shopware.com/u/AlexBS)\ **Post date:** [18. März 2021 um 17:35 UTC](https://forum.shopware.com/t/2-artikel-nebeneinander-in-der-mobilen-ansicht-anzeigen/72237/7 "2021-03-18T17:35:18Z")
Stimmt, man muss dann auch die Margins und Paddings anpassen, sonst ist das echt nicht optimal. ---
**Author:** ![stevevomwege](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/stevevomwege/32/21643_2.png) [@stevevomwege](https://forum.shopware.com/u/stevevomwege)\ **Post date:** [23. November 2021 um 07:32 UTC](https://forum.shopware.com/t/2-artikel-nebeneinander-in-der-mobilen-ansicht-anzeigen/72237/8 "2021-11-23T07:32:26Z")
So ungefähr könnte es klappen 🙂 ```auto .row.cms-listing-row.js-listing-wrapper { display: flex; flex-wrap: wrap; } .cms-element-product-listing .cms-listing-col { flex-basis: 50%; width: 50%; } @media all and (max-width: 467px){ .product-image-wrapper { height: auto; margin-top: 12%; } .product-box { padding: 0px; } .cms-element-product-listing .cms-listing-col { padding-right: 7px; padding-left: 7px; } .col-12{ padding-right: 13px; padding-left: 13px; } } ``` ---
**Author:** ![p.potharlanka](https://avatars.discourse-cdn.com/v4/letter/p/97f17d/32.png) [@p.potharlanka](https://forum.shopware.com/u/p.potharlanka)\ **Post date:** [20. April 2022 um 06:42 UTC](https://forum.shopware.com/t/2-artikel-nebeneinander-in-der-mobilen-ansicht-anzeigen/72237/9 "2022-04-20T06:42:05Z")
Hi, danke, ich hab ein custom Theme installiert und das erweitert mit dein css code und ich kann die 2 Produkten auf mobile Seite jetzt sehen. Ich hab das css code in public/theme/…/all.css abgespeichert. So bald ich was auf Backend ein Update durchführe oder Storefront build eingebe, die css code wird nicht eingespielt. Kannst du mir hier helfen? Ich bin relative anfänger. VG Prash ---
**Author:** ![stevevomwege](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/stevevomwege/32/21643_2.png) [@stevevomwege](https://forum.shopware.com/u/stevevomwege)\ **Post date:** [20. April 2022 um 07:34 UTC](https://forum.shopware.com/t/2-artikel-nebeneinander-in-der-mobilen-ansicht-anzeigen/72237/10 "2022-04-20T07:34:30Z")
Hallo Prash, die all.css ist die kompilierte Version aller SCSS Files aus Shopware. Sobald also ein Backend Update durchgeführt wird, wird die all.css durch das Compiling neu generiert. Sie dient dazu, eine schlanke einheitliche Datei aller CSS Dateien für den Client auszuliefern um Performance zu gewehrleisten. Deine Änderung über die all.css einzubauen ist somit nicht korrekt. Du müsstest also eine eigene SCSS Datei erstellen und diese dann über die base.scss includieren. **Beispiel:** **1.) Suche den SCSS Pfad zu deinem Theme Plugin (in der Regel sollte der so aussehen)** `custom/plugins/DEINTHEMEPLUGIN/src/Resources/app/storefront/src/scss` **2.) Lege dort eine Datei an, z.B. custom.scss** 3.) Füge in die custom.scss deinen gewünschten SCSS Code ein 4.) suche die base.scss (sollte im oben genannten Verzeichnis liegen) 5.) Füge `@import 'custom';` am besten direkt nach dem vorhandenen Import `@import 'variables';` ein. Danach muss ein Compiling durchgeführt werden. Entweder mittels CLI / SSH oder einfach im Shopware Backend in die Theme Optionen gehen und dort einmal auf Speichern drücken. Falls du mit dieser Thematik nicht ganz vertraut bist, und/oder dich unsicher fühlst, gäbe es auch eine Custom CSS/JavaScript Extenstion als Alternative. Diese ist kostenfrei und funktioniert super: > **[Custom JavaScript/CSS Manager für Shopware 6](https://store.shopware.com/dne5719820551438f/custom-javascript/css-manager-fuer-shopware-6.html)** > > Fügt dem Backend einen Container Manager für eigenes JavaScript/CSS/SCSS hinzu. Das Plugin bietet die folgenden Features: Anlegen von beliebig… ---
**Author:** ![p.potharlanka](https://avatars.discourse-cdn.com/v4/letter/p/97f17d/32.png) [@p.potharlanka](https://forum.shopware.com/u/p.potharlanka)\ **Post date:** [20. April 2022 um 08:41 UTC](https://forum.shopware.com/t/2-artikel-nebeneinander-in-der-mobilen-ansicht-anzeigen/72237/11 "2022-04-20T08:41:07Z")
Hallo Steve, ich hatte die Listings.scss erweitert, dort habe ich „.“ vergessen, deswegen nach der Compiling die css datei wurden nicht mit „.“ genommen. Jetzt hat sich geklappt. vielen Dank ---
**Author:** ![p.potharlanka](https://avatars.discourse-cdn.com/v4/letter/p/97f17d/32.png) [@p.potharlanka](https://forum.shopware.com/u/p.potharlanka)\ **Post date:** [25. April 2022 um 09:26 UTC](https://forum.shopware.com/t/2-artikel-nebeneinander-in-der-mobilen-ansicht-anzeigen/72237/12 "2022-04-25T09:26:36Z")
Hallo Steve, kannst du mir auch sagen wie ich die 2 Artikel in Produkt Slider hinbekommen kann? vielen Dank Prashanth ---
**Author:** ![great2gether](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/great2gether/32/12887_2.png) [@great2gether](https://forum.shopware.com/u/great2gether)\ **Post date:** [12. August 2024 um 21:22 UTC](https://forum.shopware.com/t/2-artikel-nebeneinander-in-der-mobilen-ansicht-anzeigen/72237/13 "2024-08-12T21:22:42Z")
Das geht in den Einstellungen des Sliders in der Erlebniswelt. Hier musst du die Mindestgröße runterschrauben, beispielsweise auf 150px. Hier ist noch ne Option wie man 2 Artikel nebeneinader in den Listings anzeigen kann: > [@Mobil 2 Artikel nebeneinander](https://forum.shopware.com/t/mobil-2-artikel-nebeneinander/100304/4): > > Guten Morgen, werden dir Änderungen, die du im Child-Theme machst im Frontend schon angezeigt, das ist erstmal wichtig um zu testen, ob bei der Einrichtung des Child-Themes alles funktioniert hat. Das komplette Date müsste so aussehen: \views\storefront\component\product\listing.html.twig {% sw\_extends '@Storefront/storefront/component/product/listing.html.twig' %} {% block element\_product\_listing\_col %} {% for product in searchResult %} \
{% block element_product_listing_box %} {% sw_include '@Storefront/storefront/component/product/card/box.html.twig' with { 'layout': boxLayout, 'displayMode': displayMode } %} {% endblock %}
{% endfor %} {% endblock %} ``` Good luck - have fun. ---
**Author:** ![anett1](https://avatars.discourse-cdn.com/v4/letter/a/db5fbb/32.png) [@anett1](https://forum.shopware.com/u/anett1)\ **Post date:** [28. Januar 2025 um 14:28 UTC](https://forum.shopware.com/t/2-artikel-nebeneinander-in-der-mobilen-ansicht-anzeigen/72237/14 "2025-01-28T14:28:39Z")
@stevevomwege @great2gether Hallo, danke. Es funktioniert, allerdings sind es jetzt nur 3 Produktboxen in der normalen Ansicht. und in der mobilen Ansicht sind sie ziemlich weit auseinander. Könnt Ihr mir den Code schicken, dass es wieder 4 Boxen sind, bitte Dankeschön Anett