Hallo zusammen!

ich werde irre! :D

Nach rund 10 Stunden rumprobieren brauche ich etwas Support. Vielleicht habt ihr eine Idee.

Ziel ist ist, es eine "Galerie" mit H3 Zentriert auf dem jeweiligen Bild sowie overlay effekt zu erstellen. Dabei soll die Galerie über die volle Breite gehen, keine Abstände zwischen den Bildern haben, und natürlich responsiv umbrechen bei Verkleinerung.

Ich habe bereits probiert Container nebeneinander anzuordnen oder Flexboxen zu nutzen. Ohne Erfolg. Das bisher beste Ergebnis konnte ich erzielen, in dem ich das Spaltenwidget genommen habe (4 Spalten)
dies auf die volle Breite gezogen habe, die einzelnen Spalten mit Padding 0 versehen habe damit der Rahmen wegfällt. Mobil habe ich jeweils Spalten nebeneinander gesetzt. Mobil wunderschön randlos.

Da die Spaltenbreite bei 4 Spalten nicht auf 25% sondern 23,5% gesetzt wird, entstehen die Abstände zwischen den Spalten. In der Konsolte kann man es wunderbar testen und die Werte auf 25% setzen. Das perfekte Ergebnis!
Leider habe ich keinen weg gefunden dies per CSS einzusetzen.

Hier die Website um die es geht https://www.eishunger.de/ - Nicht wundern, hier wird gerade viel experimentiert. Es geht um den Spaltenblock recht weit unten auf der Seite.


Ziel ist so etwas: https://www.schlecks.com/hausbecher/
Ähnlich gesehen hier:https://redesign-stockholm.jimdofree.com...en/h-galerie-1/ (wobei ich dann keine Ahnung habe, wie ich da ran komme um Overlay oder H3 etc zu setzen.

HILFE :D

Danke und LG

Entschuldige meine späte Antwort!
Ich war etwas "Jimdo-Abwesend"... Nun kam es mir eben in den Kopf.

Tatsächlich habe ich es lösen können via CSS.

Overlay mal außen vor, da es erstmal damit ja nichts zu tun hat:

/* Breite definieren Container 1-3 */
.cc-m-hgrid-column{
   min-width:25%; !important;
    padding: 0;
}
 
/* Breite definieren Container 4 */
.cc-m-hgrid-column.last{
    width:25%;
    float:left;
}
 
/* Spaltenabstand entfernen */
.cc-m-hgrid-column .n{
    padding:0;
}
 

/* Tabelle Fullcreen */
#cc-m-7632411511 {
    width: 100vw;
    left: calc(-50vw + 50%);
    position: relative;
    padding: 0px;
}
.cc-m-gallery-slider ul img {
    height: auto !important;
}