3D Model is cut off by a div on site

[idrisbrewster]

I am looking to make the scale of my 3d model bigger so that it takes up a larger amount of the page, but there is some sort of div/box that is cuts it off when I make the scale bigger. Is there anyway to increase the size of that container so that I can make my model bigger without cutting any of it off.

Here is the site: https://moversandshakersnyc.webflow.io/about

[elalish]

It appears you have not set the CSS width or height on your MV element, so it's just using the default 300x150 pixels.

[elalish]

You need to use CSS; width and height are not attributes. It's exactly like setting the size of a <div>.

[idrisbrewster]

so something like this:

toussaint {
width: 500px;
height: 750px;
}

[idrisbrewster]

I am able to change the size of that box through developer tools. The CSS properties that I am changing are as follows:

:host { display: block; position: relative; contain: strict; width: 300px; height: 150px; }

However when I try to change the CSS of the property using its id, it doesn't change. I have tried using ":host", "toussaint" and "model-viewer#toussaint" as the selector, and none of those have worked. How can i implement these changes in my CSS?

[ghost]

try adding model-viewer#toussaint to your styles

example:

<style>
  model-viewer#toussaint {
    width: 500px;
    height: 750px;
  }
</style>

also this should work

#toussaint {
width: 500px;
height: 750px;
}

[idrisbrewster]

this worked! Thank you!!