Inhalte aufrufen

Profilbild

Gesamtbreiten Anteil Shop


  • Bitte melden Sie sich an, um eine Antwort zu verfassen.
1 Antwort zu diesem Thema

#1 gerdweing

gerdweing

    Member

  • Members
  • 18 Beiträge

Geschrieben: 07 November 2020 - 12:55

Wie kann ich den Prozentanteil der Bildbreite des Anteiles vom Shop erhöhen?


lg Gerd

 

shop.ksca.eu


#2 Marcel Schmidt

Marcel Schmidt

    SmartStore AG

  • Administrators
  • 112 Beiträge

Geschrieben: 09 November 2020 - 17:23

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)

 
Für mehr infos über Bootstrap breakpoints: https://getbootstrap...ive-breakpoints
 
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

  • stefanmueller und gerdweing gefällt das