Help With Aspect Ratio and Mobile Responsiveness

  • Resolved 1ramyt

    (@1ramyt)


    2 years, 7 months ago

    Hi there.
    Me again, with another issue with aspect ratio and mobile responsiveness.
    On the link that I need help with (bottom of post), I’ve applied some CSS code that I researched; it works perfectly for mobile responsiveness and scaling in other instances (for example, YouTube videos, Prezi, Powerpoint, etc). I’ve watched LOTS of videos, read quite a few tutorials, and tried everything that was suggested. However, I’m still having issues.

    Here’s the issue: if you view the page in the full desktop or even tablet configuration, it looks fine. However, once you start shrinking it down after a certain point, despite the fact that the aspect ratio remains as it should, the screen and functionality become unusable: you can’t scroll, you can’t click on any of the nav buttons on the embedded content within that iframe. Have a look and you’ll understand what I mean.

    What could I be doing wrong?
    How can I fix it?

    Here’s the CSS code I wrote, which was taken from one of the tutorials I saw. Again, this works in other cases, but not this particular content in the iframe.

    .responsive2 {
  overflow: hidden !important;
  padding-top: 35px !important;
	padding-bottom: 56.25%;
	height: 0;
  position: relative !important;
}

.responsive2 iframe #story-map {
    position: absolute !important;
    top:0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

    And here is the html embed code:

    <div class="responsive2">

<iframe width="100%" height="800" frameborder="0" scrolling="yes" margin="0 0 5% 5%" id="story-map" src="https://na-alii.maps.arcgis.com/apps/MapJournal/index.html?appid=c37ca5637eb045c8921731a730d0d647"></iframe>

</div>

    Additionally, if you’d like to see what mobile responsiveness looks like without the CSS code, you can click here. You’ll notice that the responsiveness looks great until you get down to mobile size. At that point the left navigation or “story” pane disappears at some point – I’m trying to avoid it doing that with the aspect ratio that I’ve applied in the previous example.

    Could this just be an issue with the ArcGIS (the content inside the iframe embed) system?

    I hope that makes sense. If not, please feel free to ask questions.
    And thank you so much for your help.
    This is such an amazing community!

    • This topic was modified 2 years, 7 months ago by 1ramyt. Reason: Added the html embed code for iframe
    • This topic was modified 2 years, 7 months ago by 1ramyt. Reason: added details and clarifications

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    ERSI runs a script in their mapping app that sizes the map frame to its container size when the page first loads. When you shrink a window to test responsiveness, the size data it first obtained is no longer valid. It does not listen for window size change events, so it’s unable to readjust on the fly. However, after obtaining the desired test screen size, if you reload the page, the map should properly adjust accordingly.

    The red annotations on the first map look a little off vertically on small screens despite reloading the page. This appears to be an artifact of where the displayed map center is defined. If it were moved South a bit (making the entire map move North) it’d probably look and work fine.

    Thread Starter 1ramyt

    (@1ramyt)

    Hi @bcworkz thank you for your thoughtful response. I think by the time you had a chance to see the link, I removed the CSS that I posted above, so you may not have seen what I originally posted, but I do understand what you’re saying. I ended up taking another approach because, as you stated, ESRI’s internal scripts seem to control the responsiveness. I also found out that this particular story map was created in an older version of ArcGIS, not the newest one; apparently the newer version provides a better solution for mobile displays.

    In any case, thank you for your feedback. It’s very much appreciated.
    Have a great week!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Help With Aspect Ratio and Mobile Responsiveness’ is closed to new replies.