Masonry mobile view has large empty space and small images

Hi there,

Do you have a link I can view?

Hi, thanks for responding

This is just a test site so ignore the current content but here is the link with the issue in mobile view:

https://www.realbritishchocolate.com/new-gallery/

The desktop view had an uneven space either side of the gallery (too much space on the right side) although nothing like mobile, but I solved that by increasing the gutter to 8

thanks

Try the following CSS

.bne-gallery-masonry-wrapper .gallery-single.col-3-masonry { width: 30% !important; }

I’m addressing this in the next update to be a little more flexible on the widths and gutters. The downside in general is that the size of the gutter effects the column size as it’s added to the overall width. So what’s happening in your case is that the three columns plus the addition of the gutter of each column is causing it to overall be above 100% of the container width. This causes the the stack to collapse again to two columns from the three.

Hi, thanks for that but unfortunately although it fixed the mobile view, the desktop view had a large gap on the right hand side.

However without using the css above I started playing with the gutter and found that the maximum gutter can be is 3 and then the mobile view is ok and shows 3 columns properly. The desktop view now has a slightly larger space on the right of the gallery than it does on the left but looks ok.

I could probably even this up if need be by using some custom css on the pages I’m using galleries, but using a maximum gutter of 3 fixes the issue for me for now.

Having 3 columns on desktop reducing to 2 larger columns on mobile would be ideal but probably too complex to implement here.

Thanks again for your help and look forward to the update.

I’ve pushed out v1.0.3 which does a better calculation of column widths using any gutter size. Should be much better now. You can also disable the responsive columns by adding responsive=”false” to the gallery shortcode.

Thanks for this – now it works perfectly!

I have taken out the gutter specification completely and with the new update the layout works exactly right on both desktop and mobile views.
I wanted 3 columns on desktop and 2 on mobile and that’s what it does.

Thanks again.

Can seem to run it using elementor. How can i use it with elementor?

Hi @hadoydoy.

Elemontor does not use the same media selector when creating an image gallery nor does it actually use the [gallery] shortcode. It instead uses inline html.