Reduce height of cesium map container

CesiumJS
1

I’m using cesium map 3D i want to reduce its size but it is not getting reduced

<style type="text/css">
html, body, #cesiumContainer {
    width: 100%; height: 60%; margin: 0; padding: 0; overflow: hidden;
    font-family: sans-serif;
}
</style>

I’m trying to give height 60% but this is not working.

Sandcastle link
Any suggestions Please, Thanks

2

@James

Can you send over a screenshot of what you have so far? Your code snippet looks correct - I am surprised that you are not getting the desired results. Any suggestions from the rest of the community?

-Sam

3

Hi James,

maybe you have put your CSS before the import of Cesium styling?
You have to put it after the import to overwrite it like this:

<style>
  @import url(../templates/bucket.css);
  html, body, #cesiumContainer {
    width: 100%;
    height: 60%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: sans-serif;
  }
</style>

Here is a working example:
Sandcastle Example

Best, Lennart

1 Like
4

@lennart.imberg

Thank you for the suggestion! @James be sure to give this a try.

-Sam

5

Thanks @lennart.imberg

1 Like