Mobile Ansicht Elemente nebeneinander mittels CSS Klasse

Liebe Shopware 6 Community,

ich suche nach einer Möglichkeit mehrere Elemente bspw. Bilder (3 Spalten ect.), wie es mir die Anordnung in der Desktop Ansicht erlaubt via Erlebniswelten, eventuell mittels Atmos auch in der Mobile Ansicht nebeneinander darzustellen, statt übereinander. Ich habe das Problem auch innerhalb des Forums schon verfolgt und einige Ansätze gesehen, allerdings frage ich mich, ob es auch möglich ist nötige Änderungen für die ausgewählten Elemente in der Element eigenen CSS Klasse Spalte vorzunehmen.
Liebe Grüße,
Julius.

Hi Julius,
im Regelfall wird die Breite der Elemente über das Bootstrap-Grid geregelt. Dabei lauten die Klassen häufig wie folgt: col-12 col-md-6 col-lg-3.
Die aus meiner Sicht einfachste Möglichkeit um dieses Schema zu „manipulieren“ ist es, dass du über die Einkaufswelten deinem Element eine eindeutige CSS-Klasse gibst und anschließend anhand der Klasse über CSS genau auf dieses Element zugreifst.

Ah, sowas habe ich befürchtet. Die col-12 zu col-6 ändern oder derartiges ist leider das einzige was ich wirklich in Richtung Lösungsansatz verstehe. (bin vorher noch nie mit CSS in Kontakt gekommen) Aber vielen Dank für Deine Hilfe.

Hallo Julius,
wenn sich das Element immer gleich verhalten soll - also überall wo du es einsetzt - könntest du das entsprechende Inhaltselement global abändern via deinem eigenen Theme. Dort könntest du z.b. den gewünschten Tausch der Klasse von col-12 zu col-6 vornehmen.

Wenn es nur vereinzelt angepasst werden soll, dann bleibt nur die bereits oben genannte Variante mit einer eigenen Klasse und dem entsprechenden Überschreiben im CSS.

1 „Gefällt mir“

Vielen Dank,
ich versuchs mal.