Images not showing on fresh install - Githubissues

gatsbyjs / gatsby-starter-wordpress-blog

BSD Zero Clause License

103 stars 130 forks source link

Images not showing on fresh install #8

Open vinayraghu opened 3 years ago

vinayraghu commented 3 years ago

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)

Screen Shot 2021-03-14 at 12 33 05 AM

Actual (on Mobile)

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

Screen Shot 2021-03-14 at 12 44 47 AM

Notes

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

vinayraghu commented 3 years ago

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;
}