Hey guys, I recently started to use Splines and the integration method is to create a custom liquid and then copy the viewer embed from Spline. This works but when in mobile mode the sizing doesn’t change to fit the screen? Any ideas on what I can do here? Thanks
Hi @EcommKingz ,
Please share the website URL.
Sure it’s, https://pwaclothing.myshopify.com/
The password is pwa123
Hi @EcommKingz ,
Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css file Add the provided code at the end of the file.
canvas#spline {
height: 100vh !important;
}
Unfortunately, it stays the same in mobile view.
Hi @EcommKingz ,
Go to Online Store, then Theme, and select Edit Code.
In theme.liquid, search for and paste it in the line below.
@media (max-width: 768px){
#spline {
height: 100vh !important;
}
}
Please share the store access. @EcommKingz
Do you mean password?
Hi @EcommKingz ,
You should create an additional block specifically for mobile view.
When viewing on desktop, remove the mobile block, and vice versa.
Once you’ve added the block, please come back here and share the link so I can assist you with editing the code.
Best,
Daisy
One reason I switched away from raw Spline embeds is that some web-first 3D canvas tools give you watermark-free embeds and handle responsive scaling properly on mobile. Orbital (orbital3d.design) does this without locking the canvas size.