I am also trying to solve this problem. When the height of the container is “Auto”, the mobile screens are ok. However, on a desktop monitor, the window has strange proportions – something like height / width – 1: 4 or 1: 3 / according to the screen resolution /. When a fixed size is set for the height of the container, for example 500 px. things look much better for desktop monitors, but on mobile screens in landscape mode the scene does not fit. I tried experimenting with additional CSS settings, but for some reason, the settings that are set in the “General” section are a priority.
Hello Kaz2! I finally found a solution to this case. Everything is resolved by adding additional CSS in the “Custom CSS” section. You can adjust everything you need according to the screen resolution. Things like: screen size, font and marker sizes, colors and all kinds of valid CSS attributes. Here is an example:
*Scenes window resolution
—————————————————-
@media only screen (min-width: 700px) and (max-width: 1039px) and (orientation: landscape) {
.ipnrm {
min-height: 500px;
}
}
—————————————————-
*Size, color and border of the custom markers
—————————————————-
@media only screen (min-width: 700px) and (max-width: 1039px) and (orientation: landscape) {
.ipnrm .ipnrm-markers .ipnrm-custom .ipnrm-body>img {
width: auto;
max-width: 200px;
height: auto;
background-color: gray;
border-right: solid;
border-left: solid;
border-top: solid;
border-color: #24cb83;
border-width: 3px;
}
}
—————————————————-
*Size, color and font below the marker
—————————————————-
@media only screen (min-width: 700px) and (max-width: 1039px) and (orientation: landscape) {
.ipnrm .ipnrm-tag {
font-size: 12px;
width: 200px;
color: #ffffff;
}
}
—————————————————-
