If you are a Bricks+ACSS user and a Happy Files user, you may have noticed some odd layout spacing for a photo gallery in Gutenberg. This is because the list has some “smart spacing added that isn’t accounted for. Fortunately it is a simple line of CSS. I have noticed this with some other items, and the list of overrides may grow.

.happyfiles-gallery li{
	margin-block-start:unset!important;
}

Responsiveness

I recently found that the Gutenberg block for a Happy Files Gallery does not give you the ability to control the behavior at different breakpoints. In Bricks, you can use the native breakpoints to change the column count. To solve this, I just added some CSS.

.happyfiles-gallery>ul.crop[data-col] {
  grid-template-columns: repeat(auto-fit,minmax(20rem,1fr));
}

This just tells the browser to fit in as many as you can, but the smallest they can be is 20 rem (320px at normal zoom).