Video

CSS Klasse eingeben

Nachdem ihr die Gallerie erstellt habt, müsst ihr in der Row Settings eine eigene CSS Klassenname eingeben.

cb-gallery-masonry

Jetzt könnt ihr im Child Theme im style.css den folgenden Code eingeben. Dieser Code sorgt dafür dass eure Gallerie nun im Masonry Stil sichtbar ist.

/* 
Masonry Gallery
*/

.cb-gallery-masonry .et_pb_gallery .et_pb_gallery_items {
  column-count: 3; /* number of columns for desktop */
  column-gap: 15px; /* column spacing */
}

@media only screen and (max-width: 1200px) {
  .cb-gallery-masonry .et_pb_gallery .et_pb_gallery_items {
    column-count: 2; /* number of columns for tablet devices */
  }
}
@media only screen and (max-width: 767px) {
  .cb-gallery-masonry .et_pb_gallery .et_pb_gallery_items {
    column-count: 1; /* number of columns for mobile devices */
  }
}

.cb-gallery-masonry .et_pb_gallery .et_pb_gallery_items .et_pb_gallery_item {
  width: 100%;
  margin: 0px 0px 10px 0 !important; /* replace 10px to change row spacing */
  float: none !important;
}