NO BUG: Image Gallery Masonry Layout: No Top/Bottom Spacing

Browser: Chrome 110
OS: macOS

Updated a Site from 1.12.4 and on two Pages with Image Galleries in “Mansory Layout” there is no more horizontal Space. Vertical Space ist working fine.
Tried to change Layout to Grid and back, but the issue is still there.

Hi berndt,
Thanks so much for your report!

Please provide a live link and screenshots of your gallery settings.

Best regards,
timmse

Did disabling Autoptimize also solve this problem?

Unfortunately not. If You want to have a look, I’ll provide You a Screenshot an a link:

Deactivate JS optimizations if you have them enabled. Alternatively, try to exclude isotope.min.js / remove the defer attribute (I’m not sure if there are any options in autoptimize):

I’ve tried to exclude the “isotope.min.js” with Autooptimize, but this does’nt help. Unfortunately, deactivating “suspicious” plugins doesn’t help either (Autooptimize, Motion.Page, ACE, Cache Enabler, Bricksforge, etc.)

Please send temporary login credentials and a link to this thread to help@bricksbuilder.io using the email address you used during the purchase.

Hi Berndt,
Thanks for the login credentials!

ACSS is the culprit as it overrides the margins (red). I added a temporary “fix” to Bricks » Settings » Custom CSS (green - maybe there’s some setting in ACSS to exclude certain selector from the defaults):

You should report this to ACSS to get it sorted in the long run. As soon as they @layer their styles, there shouldn’t be any issue anymore.

1 Like

Thank You again! :wink:
I’ll report it to ACSS.

@timmse sorry, but this isn’t a bug on ACSS’s side.

It may be that ACSS is overriding the Bricks styling, but ACSS has a specificity of 0,0,1 and Bricks’s has a specificity of 0,3,1


The problem, however, is that you place the styling in the Bricks layer and not outside of the layers. This means that it can be immediately overwritten by virtually any plugin that styles the li tag, for example, with margin-block. The same applies, of course, if a user applies global styling like margin-block to the li. This is why ACSS overwrites it, even though it uses the smallest possible specificity. And placing ACSS in a layer below the Bricks layer would destroy the principle of a CSS framework.

You simply overwrite the variable located in the Bricks layer locally on the class or ID in the Bricks gallery element.

Such things shouldn’t be in the layer if they’re intended to be overwritten/restyled.

This is a Bricks (CSS layer) problem, not an ACSS issue.