Trying to create this kind of gallery but not having much success

I am trying to create a photo gallery like Ralf’s - link here where there are no gaps and when you click on an image it shows the full size photo without the navigation.

However, when I try to create the same gallery I keep getting the accompanying screenshots. All the images are 225x150.

I don’t want the white edges showing when clicking on the image as is shown in the above image. Can somebody please help me please?
Thanking you,

It’s easy to make the gallery, just remove the margins from around your image brics and make sure to uncheck the “include Gutters” checkbox in the Row properties.

Screenshot 2020-05-21 at 11.23.36

However, just like the website you referenced, the images must be all the same size and aspect ratio. This will ensure that when the lightbox is open, it doesn’t change in size as someone flips through the image. The arrows in the lighbox will normally sit inside the displayed image (as in the example site). If you want to change the properties of the arrows, you can do so by making changes to the class associated with them.

When it comes to sizing the images, you should ensure that the images are sized to the dimensions of your desired lightbox. For example, if you want the lightbox to display 1200 x 640, that is the size of the images you would use. When these images are placed on your image grid, they will display at whatever width the underlying columns are set to. However, when the image is clicked, the lightbox will open at the original image size.

If you want to have the gallery the full width of the browser window, as opposed to the full width of your page, select the bloc and select the full-width option as shown below.

Thank you for that information. I tried unchecking the “include Gutters” and set margins to “x” and got screenshot !. What I was after. However, when I click on anyone of the images I still get the border either side which I don’t want. I just want to be able to see the image. Is that possible? Does it need to be done through custom classes? I have no problem using “gallery” in a new project but I am using a template and am not sure whether there is some conflict.

Thanking you.


In the interactions panel click the dropdown and choose full screen.

CleanShot 2020-05-21 at 06.35.56@2x


Looking at your screenshot of the gallery, it seems that two of your images have the white borders as part of the image. It may be that the first image also has the white border, but maybe it’s been set to display at a specific size in the gallery which cuts off the sides. Maybe you can upload the actual images you used so we can take a look. If your original images contain white margins on either side, they will display in the lightbox. If that is the case, you will have to crop your images in an image editing application to remove the margins. and then load them back into your gallery.

Thank you both. Whilst three images looked as if they had white border they didnt in fact. All images were of the same size 600x400. I did as suggested and selected “Full Screen” and all is now working as it should. Just need to brighten up the navigation arrow which shouldnt be too hard to do.

Thank you truly.

One last question! When I click on an image it appears with a black background. Is there anyway to have that transparent or neutral? E.g. here is an example from Ralf’s gallery:

but I’m getting:

just a black background.

Thanking you