Gatsby Image - possible get rid of empty div with padding?

I'm using a masonry system that doesn't work with Gatsby Image but works fine with regular jpgs and gifs.

I'm 99% sure it's because of this empty div with padding that gets inserted when I use Gatsby's <Img>, the second line here:

<div> <div aria-hidden="true"></div> <picture><source srcset="... ... 

when I delete that in the inspector view the masonry works fine. Is there a way to omit that from being inserted?

1 Answer

If you're confident it's ok to remove that div, try setting display: none to it:

.gatsby-image-wrapper > div[aria-hidden="true"] { display: none; } 

display: none will basically remove the div from the page layout & may solve your issue.