Shopify themes, liquid, logos, and UX
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.
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 <head> and paste it in the line below.
@media (max-width: 768px){
#spline {
height: 100vh !important;
}
}
Again still the same but now it displays a message on top of the spline. Really not sure what the issue is.
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
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025