'Increase width and height on html viewer model

Currently when I upload the code below into an HTML component on my site the content is constrained to a small box, however there is far more space in the html component to fit the content.

Can someone please let me know what and where to write the code that would be most appreciated!

<script type="module" 
        src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<model-viewer 
       alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum" 
       src="shared-assets/models/NeilArmstrong.glb" 
       ar ar-modes="webxr scene-viewer quick-look" 
       environment-image="shared-assets/environments/moon_1k.hdr" 
       poster="shared-assets/models/NeilArmstrong.webp" 
       seamless-poster shadow-intensity="1" camera-controls>
</model-viewer>
htmlmodel-viewer


Solution 1:[1]

If you want to increase a model-viewer box width and height then you can easily apply a css on model-viewer tag.

    model-viewer{
         width:400px;
         height:400px;
    }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Iron Man

Related Questions