Images not showing on fresh install

[vinayraghu]

First of all, thank you for building such a great starter. It has been an amazing journey.

I am having trouble with gatsby-inline-image not respecting the parent containers width or height.

Steps

• Clone repo
• Point gatsby-source-wordpress at my local Wordpress instance (local by flywheel)
• Unrelated? Added process.env.NODE_TLS_REJECT_UNAUTHORIZED=0 in gatsby-node.js)
• Add tailwind as per docs and some custom CSS
• Run gatsby-develop

Expected (on mobile)

Actual (on Mobile)

Image too wide, going beyond 100% viewport and causing a horizontal scroll bar.

Notes

• Updated all plugins to latest version
• Wordpress side is perfectly fine so it has to be something on the gatsby image transformation

[vinayraghu]

I figured out the issue but I am not sure if it's my problem or its common enough to be addressed. I needed to wrap all my images on my wordpress templates in a div and used the following CSS to solve.

Gatsby inline image wrapper was setting width: 1024px even on mobile but the max-width: 100% was not being applied.

I'll let you decide if you want to close this issue. Thanks again for the great starter!

.my-image-container .inline-gatsby-image-wrapper {
  width: 100% !important;
}