Kann ich im TCMS-Gallery2-Stack die Grid Margins noch verringern?

Wenn ich im Gallery2-Stack “Grid Margins?” ankreuze, dann wird ein relativ großer Margin hinzugefügt. Wie kann ich den Margin verringern?

Gruß
Jan

Ich kann dir das jetzt nur für Version 3 beantworten, das sollte aber bei Version 2 nicht viel anders gewesen sein. Im Konfigurationsbereich unter Layout kannst du Margin und Padding einstellen:

verstehe ich leider nicht? Gallery3 ist doch von inStacks und Gallery2 ist doch von Joe.

Ich kann Dir bei Deinem Problem leider auch nicht helfen, kann aber bestätigen, dass Michael sich wohl bei seiner Antwort vertan hat. @apfelpuree: der Stack, den Jan meinte, ist der für Foundation 6 optimierte “Gallery 2” aus Total CMS. Da kann man aber so langsam auch wirklich durcheinander kommen…

1 Like

Ah, es gibt noch einen Gallery-2/3 Stack von Jannis. O.K. aneinander vorbei geredet

Wenn überhaupt geht es bei dem Gallery-Stack von TCMS wahrscheinlich nur mittels Custom CSS, müsste ich aber erst ausprobieren

2 Likes

Ich habe schon mal etwas CSS geschrieben und das funktioniert auch. Nur wird dann die rechte Cell in die nächste Zeile gepushed.

Hier habe ich das Beispiel:

Und wo ist da jetzt der Gallery Stack verarbeitet? Mach mal einen Screenshot

da sind erstmal nur Testbilder (1 … 5) eingesetzt

Bildschirmfoto 2021-01-11 um 20.42.05

Hmmm. Ich finde in der Seite Code für einen Graphic Stack von Will Woodgate, aber nicht für den Gallery Stack

dann schau mal bitte auf die Portfolioseite - sorry mein Fehler:

guck mal. Bild 3 wird ja in die nächste Zeile geschoben, weil 3 x 33,3% ja 99,9 % Breite ergeben und dazu kämen dann noch die 6 x 2px Margin hinzu, was die 100% überschreitet.
Wenn ich jetzt aber die Breite der Bilder auf 32,9% setze, dann passen auch 3 Bilder nebeneinander in eine Reihe.
Das Problem ist nur, dass, wenn ich das Browserfenster verkleinere, ab einem gewissen Breakpunkt das dritte Bild wieder verschwindet und auf der Mobilansicht nicht ein Bild je Reihe zu sehen ist, sondern 2.
Das heißt, ich müsste doch eigentlich für alle media queries entsprechende CSS Codes schreiben, oder?
Ich bin so gar kein CSS-Typ und suche mir das gerade alles aus dem Netz und einem Buch zusammen, aber Joe hat ja auch für seinen Standardabstand (2rem) insgesamt 9 Möglichkeiten für x und y Ausdehnung berechnet.
Wenn ich wüsste, wie er wo die rem-Angabe gemacht hat, dann könnte ich mir ja den Teil einfach rauskopieren und durch einen kleineren Wert ersetzen, aber das übersteigt gerade dann doch meinen CSS-Horizont.

was meinst du?

O.K. noch ein Versuch, auch wenn ich dir vielleicht nicht weiterhelfen kann, weil sich mir das Problem so noch nicht stellte und ich erst ein entsprechendes Projekt nachbauen müsste:

Wenn ich in deine Portfolio-Seite gehe und diesen CSS-Code nutze:

.cell {
margin: 0px;
width: auto;
}

verschwindet der Rand und ich sehe auch nicht das Problem, dass sich die Inhalte bei Änderung der Anzeigebreite irgendwie unvorhergesehen verschieben (den Code für width kannst du auch weglassen, die Stellschraube ist margin)

hi Michael, ja, das hatte ich so auch schon probiert, allerdings möchte ich ja einen leichten Abstand zwischen den einzelnen Zellen haben. Ohne Abstand ist ja ursprünglich auch vorgesehen und mit Grid Margin kann man ja einen Abstand von 2rem aktivieren, aber der ist mir deutlich zu groß. Ich hätte halt gerne einen kleinen Abstand von vielleicht 4 px gehabt, aber das funktioniert leider nicht so ohne weiteres.
Beim inStacks Gallery3 Stack kann man zwar die Abstände ändern, aber dort kann man die Größe der Zellen nicht beliebig verändern.
Da ist also noch deutlicher Optimierungsbedarf - ist vielleicht mal eine Anfrage bei Joe und Co. wert?! :wink:

Gruß
Jan

Hi Michael, ich habe das Problem jetzt auf etwas unelegante Art und Weise gelöst. Margin scheint ja immer mal wieder etwas rumzuzicken und da ich einen weißen Hintergrund habe, habe ich das Ganze mit border gelöst. Ich habe jetzt einfach die Standardeinstellung für den Gridabstand deaktiviert und im CSS-Teil für die entsprechende Seite eine Berechnung gemacht:

.cell {
border: 2px solid white;
width: calc(100%/3 - 2*2px);
}

das klappt gut und ist auch responsive.

gruß Jan

1 Like

Gute Idee, das so zu machen.