Hi, ich habe ein Problem mit dem responsive-design. Ich habe auf der Startseite und auf der Artikel-Detail-Seite die Linke-Spalte eingefügt: .sidebar-main {.is--ctl-index &,.is--ctl-detail &,{display: block;}} Dann musste ich die Linke-Spalte und den Content wieder nebeneinander bringen: .is--ctl-index .sidebar-main + .content--wrapper,.is--ctl-detail .sidebar-main + .content--wrapper{margin-left: 16.25rem;} Jetzt habe ich allerdings ein Problem: Wenn das Fenster verkleinert wird und die Hauptnavigation verschwindet, verschwindet auch die Linke-Spalte aber ihr Platz bleibt frei sodass der Content immer noch den Abstand 16.25rem hält und nicht die ganze verfügbare breite einnimmt. Das sieht bescheuert aus. Wie muss ich es machen damit solange die Hauptnavigation und die Linke-Spalte angezeigt werden den content-wrapper mit margin-left:16.25rem halte und wenn das Fenster verkleinert, oder ein anderes Endgerät verwendet wird der Abstand wieder auf 0 geht?
Durch die entsprechenden Media Queries https://developers.shopware.com/styleti … vices.html
Wie funktioniert dass dann? Ich habe mal zwei Varianten verucht aber keine funktioniert: @media screen and(min-width: @tabletViewportWidth) { .sidebar-main { .is--ctl-index &, .is--ctl-detail &, {margin-left: 0rem;} } } .is--ctl-index .sidebar-main + .content--wrapper .device--tablet,.is--ctl-detail .sidebar-main + .content--wrapper .device--tablet {margin-left: 0rem;} Irgendwie müsste das mit der “@media screen” näher an der Lösung sein…
ich habs jetzt mal so versucht: @media screen { .device--mobile,.device--tablet,.device--tablet-portrait,.device--tablet-landscape { .is--ctl-index .sidebar-main + .content--wrapper,.is--ctl-detail .sidebar-main + .content--wrapper {margin-left: 0rem;} } } das geht aber auch nicht… Der code heißt doch auf Deutsch “Wenn der Bildschirm eine dieser Größen hat dann sll der content-wrapper margin-left: 0rem haben” Das müsste doch so funktionieren…
@media screen and(min-width: @tabletViewportWidth) { } Damit sagst du praktisch, wenn die mindest Größe vom Tablet View erreicht ist führe diese CSS Anweisung aus. Sollte so eigentlich gehen. @media screen and(min-width: @tabletViewportWidth) { .is--ctl-index { .sidebar-main { display:block; } } } Und dann musst du natürlich da auch entsprechend den Container anpassen. Cache leeren und Theme neu kompilieren nicht vergessen.