100% height for responsive use on mobile

[AdamMiltonBarker]

Describe your problem

Currently, or at least las time I looked, you have to hardcode the height, which makes it awkward for use on mobile responsive sites. How would you make it so the frame is completely responsive?

Online demo URL

https://www.innov8digitalmedia.com/portfolio/360-photography-videography/360-photography-portfolio/entry/360-photography-storiel-bangor-north-wales

Photo Sphere Viewer version

5.0.1

Plugins loaded

No response

Additional context

No response

[mistic100]

Use vh unit and an "calc" to account for your header/footer/margin etc
https://developer.mozilla.org/en-US/docs/Web/CSS/length#relative_length_units_based_on_viewport

[AdamMiltonBarker]

Doesn't answer the question, did you look at the example?

[AdamMiltonBarker]

I worked out how to do it using a custom embed I made ( https://hosted.innov8digitalmedia.com/360/photo/1 ), but without using an iframe this issue is still unresolved.

[mistic100]

Then I don't understand the question. No I didn't look at your source code, I don't when it is cluttered inside a complex app.

Provide a complete explanation of what you want.

[AdamMiltonBarker]

I wasn't asking you to look at the source code, the simple web page shows the issue if you view on mobile it is not responsive height wise as the height is hard coded. I have resolved this using my own embedding system, but others won't be able to make truly responsive solutions using your code.

[mistic100]

Yes I see that but I still don't understand what is your goal, because the page as a lot of content. Thats why I proposed height: 100vh;. If this does not suit you I need a example, a mockup of what you want.

[AdamMiltonBarker]

If you set 100% on the height of the container div the viewer will not show, you have to hard code it the height which results in it being very tall and thin in responsive view. We can close this as I resolved the issue for myself, but I have seen others are still asking for this to be fixed since the original repo.

[mistic100]

I feel you don't read my message.... 100vh is not the same as 100%

[AdamMiltonBarker]

If you did check the example I provided you would see that it would not work using viewport height. 100vh would cover the whole screen. Ideally, height would need to be auto, but that does not display anything. Anyway, just pointing out that anyone needing to use this on a responsive website will not get it to work without coding a solution similar to the one I made, which most would not know how to do. Something you should consider fixing.

[mistic100]

auto to what ? why do you refuse to explain exactly what behaviour you want ?

just take five minutes to take my place I understand that I am not in your head.

[AdamMiltonBarker]

CSS height auto? I have explained exactly the situation, in as many different ways as possible to say something so simple, your plugin is not responsive.

[mistic100]

To be able to use height: auto the element must have some content to determine what the height is. Here it is not possible, the viewer does not have a content, it is the content, so it must have a computable size.

I close this discussion has you found a working solution for your specific case.