content main inner

Hallo,

bei mir beträgt die content-main-inner 1260px. Die Shop Ansicht der Startseite (Einkaufswelten) beträgt jedoch 1160px, so dass um die Elemente ein breiter Rand von je 50px je Seite entsteht.

Kann man diesen Abstand irgendwie verkleinern, so dass der Shop anstelle der 1260px vielleicht 1220px hat?

Vielen Dank

CSS Klasse .content-main–inner hat den Abstand 50px links und rechts (padding: 0px 50px 50px 50px;)

Wenn man den zweiten und vierten Wert auf 20 setzt, ist die Breite 1220px. Verschiedene Viewpoints (Geräte) beachten. 

@waldicom schrieb:

CSS Klasse .content-main–inner hat den Abstand 50px links und rechts (padding: 0px 50px 50px 50px;)

Wenn man den zweiten und vierten Wert auf 20 setzt, ist die Breite 1220px. Verschiedene Viewpoints (Geräte) beachten. 

Hallo,

in welcher Less-Datei sind die Änderungen notwendig?

Danke schon mal im voraus.

HMS 

Am besten deine eigene Anlegen und vorher ein Template, welches vom responsive Template ableitet.

Anbei noch ein Link zu dem Thema 

https://developers.shopware.com/designers-guide/getting-started/

Liebe Grüße

Kevin

@KevinS86 schrieb:

Am besten deine eigene Anlegen und vorher ein Template, welches vom responsive Template ableitet.

Anbei noch ein Link zu dem Thema 

https://developers.shopware.com/designers-guide/getting-started/

Liebe Grüße

Kevin

Danke Kevin für Deine Antwort.
Ich habe schon mehrere Änderungen an „meinem Template“ (Child-Template) durchgeführt, jedoch bekomme ich es einfach nicht hin das auf „der Startseite“ der breite weiße Rand verschwindet. In den Unterseiten (Einkaufswelten) wurden meine Änderungen alle übernommen und umgesetzt, es geht bei mir daher nur um die eigentliche STARTSEITE. 

Gruß
HMS

Hey HMS,

ok, verstehe… Hast du Lust einmal deine URL zum Shop (gerne auch per PM) kurz zukommen zu lassen? Würde die Sache vermutlich erheblich vereinfachen :slight_smile:

Liebe Grüße

Kevin

@KevinS86 schrieb:

Hey HMS,

ok, verstehe… Hast du Lust einmal deine URL zum Shop (gerne auch per PM) kurz zukommen zu lassen? Würde die Sache vermutlich erheblich vereinfachen :)

Liebe Grüße

Kevin

Hallo Kevin,

ist auf dem Weg!
Danke :slight_smile:
HMS 

Hallo HMS,

ich habe das Selbe Problem.

Kannst du mir die Lösung vielleicht verraten, wenn es eine gibt?

Vielen Dank

Hi Zusammen,

also wenn ich das richtig sehe, kommt hier die max-width der Einkaufswelt in die Quere.

Wie du schon sagst, sehen die Kategorien soweit gut aus. Hier hast du nur noch einen kleinen Außenabstand. 

Innerhalb der Einkaufswelt ist allerdings ein max-width gesetzt: 

Zu finden unter: 

Responsive\frontend_public\src\less_components\emotions.less

    // Emotion wrapper
.emotion--wrapper {
    display: block;
    margin: 0 auto;
    max-width: 1160px;
    overflow: hidden;

    &.is--fullscreen {
        max-width: none;
    }
}

Wie wäre es den Parameter max-width in dem Template z.B. auf 1240px zu setzen? Dann solltest du nur noch einen kleinen Abstand zum Rahmen haben… 

Liebe Grüße

Kevin

Ich habe das gerade mal probiert, leider klappt das bei mir nicht :frowning:

Also ich habe mal in einer all.less folgende Einstellungen kurz bei mir getestet:

@media screen and (min-width: @desktopViewportWidth) {
  .content-main--inner {
    .unitize-padding(0, 10, 50, 10);
  }
}

.emotion--wrapper {
  max-width: 1240px;
}

Hier hat sich der Abstand in jedem Fall verringert bei mir…

Vielleicht gibt uns hms auch noch ein Feedback dazu :slight_smile:

Liebe Grüße

Kevin

1 „Gefällt mir“

@KevinS86 schrieb:

Also ich habe mal in einer all.less folgende Einstellungen kurz bei mir getestet:

@media screen and (min-width: @desktopViewportWidth) {
.content-main–inner {
.unitize-padding(0, 10, 50, 10);
}
}

.emotion–wrapper {
max-width: 1240px;
}

Hier hat sich der Abstand in jedem Fall verringert bei mir…

Vielleicht gibt uns hms auch noch ein Feedback dazu :)

Liebe Grüße

Kevin

Sorry war kurz aus dem Hause.
Ich teste es gleich einmal und melde mich wieder!

Gruß
HMS 

@KevinS86 schrieb:

Also ich habe mal in einer all.less folgende Einstellungen kurz bei mir getestet:

@media screen and (min-width: @desktopViewportWidth) {
.content-main–inner {
.unitize-padding(0, 10, 50, 10);
}
}

.emotion–wrapper {
max-width: 1240px;
}

Hier hat sich der Abstand in jedem Fall verringert bei mir…

Vielleicht gibt uns hms auch noch ein Feedback dazu :)

Liebe Grüße

Kevin

Hallo Kevin,

Daumen hoch und vielen Dank, mein Template übernimmt die Änderungen und stellt diese nun so dar wie ich es gerne hätte!
Vielen Dank.

Kann ich auch eine Frage zum Background des Headers an Dich stellen oder wäre das zu viel des Guten???

Gruß
HMS 

Hallo Kevin,

ich habe das jetzt auch mal so probiert. Würdest du vielleicht auf meinen Shop auch mal schauen?

Unten auf der Startseite scheint es zu passen, nur die Bildchen und der Slider der Einkaufswelten will nicht.

https://www.livaro.de

Ich danke dir

Hey Hms,

kannst gerne fragen :) 

@livaro2014‍:

Der Slider bekommt ein Styling inline hinzugefügt und überschreibt deine Änderungen in der less-Datei. 

Versuche einmal mit 

max-width: 1240px !important

zu arbeiten. 

Dann sollte deine Breite greifen. Spannend wird dann nur sein, ob sich die restlichen Boxen dann auch korrekt in der Breite verhalten… 

lg

Kevin

 

Hey Kevin,

dass war ja ein super Tipp! Funktioniert :slight_smile:

Musst nur noch diesen Zusatz machen:

.content–home {
    margin-top: 10px;
}

sonst belässt er oben 50px weissen Rand.

Dankeeeeeeeeeeee

Hier nochmal der ganze Code, falls es noch jemand benötigt:

(einfach eine zum Beispiel background-custom.less im eigenen Template anlegen, in der all.less den Pfad angeben und diesen Code:

@media screen and (min-width: @desktopViewportWidth) {
  .content-main–inner {
    .unitize-padding(0, 10, 50, 10);
  }
}

.emotion–wrapper {
  max-width: 1240px !important
}

.content–home {
    margin-top: 10px;
}

1 „Gefällt mir“

super, wenn es geklappt hat :) 

Schönes Wochenende euch.

Liebe Grüße

Kevin

1 „Gefällt mir“