responsive Theme - bei Desktop-View über volle Breite anzeigen lassen?

Shopware 5 Themes & Design
1

Hallo,

wie kann man im responsive-Theme die Frontend-Anzeige für die Desktop-View über die volle Breite anzeigen lassen?
Ich möchte dass auf normalen Desktop PCs die volle Breite des Monitors für den Shop verwendet wird.

Derzeit wird diese ja begrenzt - wie ändert man dies am besten?
 

Gruß
Michael

2

Die Breite des Containers wird hier definiert: https://developers.shopware.com/styletile/_components-container.html

Die Viewports für die jeweiligen Darstellungen der Endgeräte findest du hier: https://developers.shopware.com/styletile/_variables-structure.html

Demnach legst du dir eine neue Less Datei an, in dem Falle also bspw. die _components/container.less und sagst hier, dass auf Desktops der Container 100% Breite haben soll.

@media screen and (min-width: @desktopViewportWidth) {
   .container {
      width:100%;
      max-width: none;
   }
}

 

3

@kayyy schrieb:

Die Breite des Containers wird hier definiert: https://developers.shopware.com/styletile/_components-container.html

Die Viewports für die jeweiligen Darstellungen der Endgeräte findest du hier: https://developers.shopware.com/styletile/_variables-structure.html

Demnach legst du dir eine neue Less Datei an, in dem Falle also bspw. die _components/container.less und sagst hier, dass auf Desktops der Container 100% Breite haben soll.

@media screen and (min-width: @desktopViewportWidth) {
.container {
width:100%;
max-width: none;
}
}

Hallo danke für die schnelle Antwort

Ich habe soeben wie von Dir beschrieben:

  • eine container.less erstellt
  • diese mit deinem geposteten Code befüllt
  • und entsprechend in mein selbsterstelltes Theme welches auf Responsive besiert kopiert Pfad entsprechend _components
  • Cache gelöscht
  • Theme compeliert

Leider ist immer noch die Begrenzung von 1260px für den Container vorhanden. 

ich gehe davon aus, dass es mit:

.unitize-max-width(1260, 16);

zu tun hat - wie kann ich hier das unitize ausser kraft setzen? 

4

max-width ist ja bereits auf none gesetzt. Ich gehe eher mal davon aus, dass du die Less überhaupt nicht lädst.

Hast du die .container.less in deiner all.less eingebunden?

Hier auch einmal ein kleines Video dazu: https://shopwareianer.com/tutorials/shopware-eigene-less-datei-anlegen

Du musst also noch die Datei all.less anlegen in public/src/less/all.less

Dort bindest du dann die .container.less ein. Shopware sucht immer nur nach dieser all.less im Root Verzeichnis vom Less Ordner. Der Inhalt für die all.less wäre demnach

@import "_components/container";

 

1 „Gefällt mir“
5

Du hast natürlich vollkommen recht!
Vielen Dank - jetzt weiss ich auch wie man less - richtig anwendet!
 

6

@Shopwareianer @n8lauscher Ich danke euch sehr für diese Konversation. dieses Problem beschäftigte mich schon seit tagen… den ganzen net durch gesucht alle forums…etc usw. … bis ich auf dieses Gespräch gestoßen bin und …und Gott sei dank wurde heute mein Problem gelöst. Ich wollte nur nochmal n Feedback zurückgeben und Danke sagen !!
VG;