Search code examples
gatsbygatsby-image

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 class="gatsby-image-wrapper">
<div aria-hidden="true" style="width: 100%; padding-bottom: 68%;"></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?

Solution

  • 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.