panorama width and height vs. minPitch and maxPitch

[almarass1]

Hi. I set: #panorama { width: 100%; height: 600px; } and it works with a full desktop screen but it leaves a blank white space on the bottom if the screen height is more than 600 pixels

I tried to set: height: auto; but it does not work in the sense that the panorama is not shown at all.

I noticed another issue with the above panorama settings: reducing the width of the available screen (i.e. using a smartphone), the minPitch parameter setting ("minPitch": -30) seems not to work any longer and the geometry of the shown scene seems to change if compared with the full desktop screen.

Is there anything I missed?

Thanks, Alex

[mpetroff]

I tried to set: height: auto; but it does not work in the sense that the panorama is not shown at all.

That's an issue with your CSS, not with Pannellum. The viewer has no intrinsic height, so setting the height to auto is the same as setting it to zero height, so of course you can't see it. As far as the CSS goes, the viewer is sized the same way you'd size an empty <div>.

I noticed another issue with the above panorama settings: reducing the width of the available screen (i.e. using a smartphone), the minPitch parameter setting ("minPitch": -30) seems not to work any longer and the geometry of the shown scene seems to change if compared with the full desktop screen.

Quoting from the documentation for minPitch: "Sets the minimum / maximum pitch the viewer edge can be at, in degrees." By reducing the width of the screen while keeping the height constant, you're changing the aspect ratio. As the parameter deals with the edge of the view, this affects how it is applied.

[almarass1]

Maybe I missed something important.

I need to display panoramas both on desktop and smartphone screens. Responsive images will automatically adjust to fit the size of the screen. As far as I know the following CSS settings should get the result:

#panorama { width: 100%; height: auto; }

How could I get responsiveness otherwise? Perhaps by adding media query rules? Any suggestion is welcome.

Thanks, Alex

[mpetroff]

As far as I know the following CSS settings should get the result

As I explicitly told you in my last reply, that sets the viewer height to zero.

How could I get responsiveness otherwise? Perhaps by adding media query rules?

It depends on your preferences for how you want it displayed. Using media query rules with explicit heights for different break points is one option. Another option would be to use aspect-ratio and max-height to set a maximum height and an aspect ratio to use for narrower screen sizes.