Image Gallery Grid: Expanding layout width causes overflow issue

I use the image gallery block today.

I chose the Grid for the gallery layout, but it turned out to be display: flex; when I inspected the source. I thought it was display: grid.

If it’s gonna be display: flex;, I noticed no gap option. If I add the gap value to H.Gutter there, it will expand the entire gallery layout width, which causes an overflow issue.
I know I can just set overflow: hidden to the section, but I think row-gap and column gap will work better for the gallery instead of using H:Gutter.

Because the images in it are pushing the gap on the right including the last item(3rd item), even though I noticed there has such CSS value, it doesn’t seem to work. Is it a bug?

.gallery-c35be26 .cc-gallery-card { width: calc((100% / 3) - 50px); }

This will tell clearer.

Actual Layout width

Is anyone else facing the same? Or it’s just me?

Hi @jornes I confirm this happens same on my end.

1 Like

From my perspective, everything works as it should.
Maybe there is a misconception in how the block works?
Your screenshots reflect the correct behavior as far as I am aware.

I might miss your point though.
Just checked on my end and everything behaves as intended for me.

But I get your point with the wording (grid/flex).
It does not represent the CCS values, but the actual visual appearance.

I agree. As I said, if it’s using display:flex, I think having the gap option is ideal. So it only applies to the inner space instead of pushing the space to the right.

I noticed that the CSS property 100%/3 - 50px on the front end. But it didn’t do the work as it should. So, I’m not sure if it’s a bug for me. Hehe

I thought the exact same, all is working perfect and centered, but when resizing window after, I noticed that there was a horizontal overflow to hide. I did not hide it or checked further.

1 Like

Thank you for confirming this, @AnthonyKeller

1 Like

The builder’s overflow issue appears as soon as I insert the value at the H.Gutter. Anyway, my page width is 1630px.

Not sure if this is an actual option to maintain the functionality, also in terms of the masonry option.

Isn’t it exactly doing that?

It does but not quite, maybe. Refer to the 3rd and 4th screenshots, and then you will know.

As seen in the 3rd screenshot, you will see that there is also a space on the right at the 3rd item. Screenshot number 4 shows the actual layout width. If I don’t set the overflow: hidden to the section, the space on the right will cause an overflow issue when I squeeze my browser.

Not sure about this. Have to wait to see what Louis says about this.

Hi there @jornes,

Thanks for the report.

First of all, the Gallery block is one of our older blocks that hasn’t received a proper update in some time. There are quite a few points/hacks that I would address very differently nowadays. The Gallery block will receive a proper update in time where “modern” CSS will be put to proper use.

In the meantime, your frontend looks to be doing exactly what it should. While you may see that overflow on the gallery element, it is corrected by the -50px margin property.

As for the backend scrollbar issue, I’m intrigued as I can’t seem to reproduce it on my side when using the Gallery block. If you remove it, is the overflow/scrollbar removed?

Hi @Louis
Thank you for the response!

Yes. The margin-right:-50px does the job as it should. Anyway, if I don’t set overflow:hidden for the section, there will have an overflow issue when I squeeze the screen size(frontend) because of the space on the right at the 3rd item.

To reproduce it, try setting a wide layout width. I set mine at 1630px max width(I use 24" monitor). And, yes. The overflow/scrollbar disappears after removing the value from H.Gutter.

Got it :+1:
Thanks for insisting :see_no_evil:

Will try to have a fix for this in the next few updates!


Thanks for elaborating.
Somehow missed this point and didn’t test that scenario.

@Louis just confirmed it :+1:

Thank you for confirming it! @Louis :slight_smile:

Thank you for checking it out together! @Marius :wink:

1 Like

Returning to this thread as and the now CSS Grid gallery no longer has this issue.

Thanks @jornes and everyone for your helpful review.

1 Like