A user is experiencing layout issues with a Spline 3D interactive product model embedded on their Shopify homepage. The model fails to fill the full width of the screen on both desktop and mobile devices.
Troubleshooting attempted:
Current status:
Hi There,
I have a Spline 3D interactive model of my product on Shopify home page.
It doesn’t fill the width on either desktop or mobile. (See Below screenshots)
-I put this code in the theme.css and nothing changed.
Does anyone have anything else I can try?
Thanks!
can you please share the store url?
This usually happens because Spline exports keep a fixed canvas size internally. Even if the iframe is set to full width, the scene itself doesn’t scale unless the parent container is truly edge-to-edge and the aspect ratio isn’t locked.
On Shopify this often gets worse because the section wrapper adds padding or max-width, especially on mobile. Removing those constraints usually fixes most of the issue. The model itself is fine, it’s just being boxed in by the embed.
I’ve run into this enough times that I stopped embedding raw Spline scenes and moved to a web-first 3D canvas flow where full-width scaling is handled automatically. Setups coming from orbital3d.design behave better across breakpoints.
This is more about layout control than the 3D model.
