Hallo Gerd,
wenn Page Builder Stories über die komplette Breite darstellen möchtest gibt es in der Story die Option 'Raster > Container & Inhalt Container'. Wenn diese beiden Optionen auf 'Volle Breite' gesetzt sind, wird die Story die komplette bildschirm breite einnehmen.
Wenn du allerdings die Breite der .container Klasse (umfasst nahezu alle shop elemente) für Widescreen-Desktop-Darstellung anpassen möchtest, wäre es am ratsamsten einen neuen breakpoint hinzuzufügen. Dort wird definiert ab welcher bildschirmbreite bestimmte css klassen angewendet werden.
Dafür musst du folgendes machen:
1. Füge eine Überschreibung der Variable $grid-breakpoints zu der Datei _variables-custom.scss wie folgt hinzu:
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1600px );
Dort siehst du eine Auflistung mit Breakpoint-Namen und Auflösungsgrößen.
In diesem Beispiel wird xxl als neuer breakpoint hinzugefügt. Die anderen Werte sind Smartstore standard.
Da keine css-Klassen speziell für die neue xxl-Auflösung zugewiesen sind, bleibt die Shop-Darstellung wie bisher.
Wenn dies richtig gemacht wurde, hat der Page Builder beispielsweise jetzt einen zusätzlichen Haltepunkt innerhalb des Device-Sliders an der entsprechenden Position. Dieser ist jedoch nicht visuell farblich innerhalb des Device-Sliders kodiert.
Du kannst jetzt benutzerdefiniertes CSS hinzufügen, um das Styling zu ändern, wenn dieser breakpoint aktiv ist.
Füge zum Beispiel folgenden Code der Datei _user.scss- oder _custom.scss hinzu:
@include media-breakpoint-up(xxl) {
.container {
max-width: 1540px;
}
}
In diesem Beispielcode wird die Containerklasse so geändert, dass ihre maximale Breite auf 1540px erhöht wird, wenn der Haltepunkt aktiv ist (xxl oder höher)
Dazu ist zusagen, dass das Standard-Smartstore-Theme 'Flex' für die Darstellung in den vordefinierten Werten Designed ist und ggf. Änderungen bedarf wenn diese angepasst werden.
Beste Grüße
