Spline Object Doesn't Work Well With Mobile

Shopify Discussion
1

Hi There!

I have a 3D Spline object put into a custom liquid section on my site (using Concept theme). The desktop looks great but mobile is off (see pictures).

Someone suggested that my container might not be set to fill. Also they suggested that my Spline object might not be set to fit.

Would be very grateful for some guidance.

Thanks!

Tony

Screenshot (225).png
Screenshot (225).png1079×1086 51.5 KB

Screenshot (226).png
Screenshot (226).png617×1086 29.7 KB

1 Like
2

Can you share store url and password @adbriggs66

3

Hi There,

The URL for the store is magnaclipbrand.com. The store is live so you should be able to see the issue I am having.

Thanks!

4

Hi @adbriggs66 ,

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file apps.css.
Step 3. Add these codes to the end of the file

@media only screen and (max-width: 600px) {
  spline-viewer #container > canvas{
    width: 100%!important;
    height: auto!important;
  }
}
5
  • Here is the solution for you @adbriggs66
  • Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media only screen and (max-width: 600px) {
#container #spline {
     width: 100% !important;
height: 600px !important;
}
}
  • Here is the result you will achieve:

BSSTekLabs_0-1722868720829.png
BSSTekLabs_0-1722868720829.png372×592 17.7 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
6

I put this code in the theme.css and it is still the same.

Screenshot (231).png
Screenshot (231).png580×205 12.3 KB

Any chance I input the code wrong? Or do I need to do something after this for it to take effect?

Thank you so much for the help