Spline responsive embed

Design help General
1

Hello guys,

I am having difficulty in embed a 3D model made with Spline on my page. I am trying to change the size of the “html embed” element and its content to be responsive in various screen sizes.
I am starting to think this is not possible and that I need to add a new layout and a new template for each breakpoint.

Has anyone been faced with this problem?
A thousand thanks,
I leave the read only link here and the spline url …

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi!

I also am running into this issue. I am by no means a developer as all of this is rather foreign to me. BUT! I did go inspect the element and found that there is a size parameter under “canvas 3d” that is overwriting the sizing. I think the issue lies in spline’s side and how that is being brought into webflow. Don’t quote me on that thought :slight_smile:

2 Likes
3

Yep,

It looks like there’s a set height and width on the canvas element: width: 1080px; height: 1080px;

If possible, might be worth changing this to a percentage for better responsiveness.

1 Like
5

Is this still the case?
I am having the same problem with my spline embed.

Thanks!

6

I don’t know which issue OP had since he didn’t describe it but you have to keep in mind two things when embedding Spline:

  • you cannot have your camera to be set to orthographic, use perspective
  • the Frame settings size should be set to Responsive, which is default
1 Like
7

Hey,

Thanks for the info!
I had both of these settings incorrect and I’m incredibly happy to have had the guidance to fix it.

Thanks again. :smiley:

1 Like
8

Hey, place your canvas element inside a container and size the container.

      <div class="model_3d_container">
           <canvas class="model_3d"></canvas>
      </div>

CSS:

.model_3d_container {
 width: 50vw;
}

if you have exported as responsive then the 3d model will conform to its container using width: 100% and height 100%