Adding a line break between images in a gallery module

Community How-to
1

Hi everyone,

Is it possible to create a kind of line break for a specific image in one gallery module in grid view without seeing this ‘gap’ in slider “fullscreen” view?

A second gallery would be the closest solution, but unfortunately this would eliminate the option of sliding through all images in the gallery in full screen mode.
I have tried to visualise my request in the two attached images.

Before
Before1156×843 178 KB

After
After1156×843 143 KB

I don’t think there is a default setting for this, as it is a very specific request that normally only a few people need. That’s why I’m specifically asking for a custom code solution.
Thank you very much for your support.

Best regards,
Leon

1 Like
2

Solution (CSS only)

via custom code (button on the right bottom of the backend).

Bildschirmfoto 2026-03-10 um 00.15.41
Bildschirmfoto 2026-03-10 um 00.15.411343×1194 200 KB

I solved this by turning the Sitejet gallery list into a CSS grid and forcing a new row for specific images using their element IDs.

This keeps one gallery module, so the fullscreen slider still works for all images. For my example:

/* Turn gallery into a grid */
ul.ed-gallery-items.v2 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Mobile: single column */
@media screen and (max-width: 35.9375rem) {
  ul.ed-gallery-items.v2 {
    grid-template-columns: 1fr !important;
  }
}

/* Reset Sitejet inline widths */
ul.ed-gallery-items.v2 > li.ed-gallery-thumb {
  width: auto !important;
  padding: 0 !important;
}

ul.ed-gallery-items.v2 > li.ed-gallery-thumb img {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* Force a new row at specific images */
ul.ed-gallery-items.v2 > li#ed-gallery-item_23446198,
ul.ed-gallery-items.v2 > li#ed-gallery-item_23446180 {
  grid-column: 1 / 2 !important;
}

How it works

  1. The gallery list (ul.ed-gallery-items.v2) becomes a 3-column grid.

  2. Specific images are targeted via their element IDs.

  3. grid-column: 1 / 2 forces the image to start a new row.

  4. The gallery remains one module, so the fullscreen slider still includes all images.

  5. On mobile, the grid switches to 1 column.

How to adapt it

  • Inspect the gallery item in the browser.

  • Copy its li ID (e.g. ed-gallery-item_XXXXX).

  • Add it to the CSS selector to create another line break.

1 Like
3

Thank you, Leon! I have moved this over to the How-To Category.