SOLVED: Bricks rule <img> height:auto causes issues with Gutenberg

Bugs
1

Browser: Tested in Chrome, Safari
OS: any

Bricks 2 has a rule

@layer bricks {
    img {
        height: auto;
        max-width: 100%;
        outline: none;
        vertical-align: middle;
    }
}

That height:auto causes several issues with Gutenberg content.
For example, background images in Cover block don’t fill the block’s height or don’t apply the default object-fit:cover correctly.
I have seen more blocks, like Media&Text, and features, like Lightbox, not working correctly anymore.

In every project that uses Gutenberg content, I have to add a very low specificity rule to override that height:auto and fix the issues:

img { height:100% }

2

Hi Matthias,
Thanks so much for your report!

I can replicate the issues and have added it to the internal bug tracker. We will update this thread as soon as it is fixed.

If you notice any further problems with Gutenberg blocks, please let us know as soon as possible :v:

Best regards,
timmse

1 Like
3

Regarding the Gutenberg Lightbox: Can you briefly show me what exactly the problem is? I don’t see any difference there… in the cover and media+text block, however, I do @MattHias

4

@timmse
Oops, my bad. My Lightbox issue was caused by some other self-made conflict, not by Bricks’ height:auto. I apologize.
Great that you could confirm the other two instances. This will hopefully give you an idea of the impacts.

1 Like
5

We’ve fixed this issue in Bricks 2.0.2 now available as a one-click update in your WordPress Dashboard.

Please take your time to read the changelog entry before updating: Bricks 2.0.2 Changelog – Bricks, and let us know if you continue to experience issues.