StoryMap Collection featuring an Experience Builder - display on mobile

Question

I just published a StoryMap collection that contains 6 StoryMaps and 3 Experience Builders. When using the 'Preview' function of the collection, all pages display well on all devices. However, when I pulled it up on an iPhone, I had trouble with 2 of the experience builder apps (these 2 are fullscreen while the 3rd is scrolling).

The issue is that the experience builder apps are not displaying as a fullscreen app, instead the user has to scroll a little to view the bottom of the app. I believe that since the collection has a header bar (where the navigation buttons are), it is pushing the experience builder app down and forcing the page to be scrolling. For a user, it is difficult to scroll the page because you can only 'grab' a small portion of the screen to scroll and see the bottom.

The work-around that I decided to use is using a 'footer'/gap at the bottom so that everything is visible in a single screen. The drawback is that depending on the user's phone screen size, some users will see the white space at the bottom of the screen.

Link to Item 2 of the Collection

Link to Item 3 of the Collection

Fairly confident the behavior is caused by integrating an experience builder into a StoryMap collection, however I can't tell if the issue is more on ExB's side or Story Maps side.

Anyone else seen this behavior in their own collection? Any other work-arounds that may better address the behavior?

Notes: behavior was observed on 2 different iPhones, have not tested on an android. Same behavior while using Safari and Google Chrome apps.

BethAnnWinebarger · Answer

The trail and trail conditions tabs are Experience Builder applications with a Map widget as the centerpiece. The pop-ups are configured at the Web Map level (the new Map Viewer is best when working with ExB).

In terms of the pop-up configuration, the trail conditions is just the field list that comes standard in the new Map Viewer. The trails Web Map uses HTML in the pop-up to create a table that uses a mix of attributes and expressions. The resulting pop-up windows are almost identical. The HTML is more complicated to configure but provides more customization.

Hope that helps!

ve360 · Answer

Hello! I have a question, how did you set the popup in the trail and trail conditions tabs? is it a widget?

Thanks!

AbbyE_Esri · Answer

Hi @BethAnnWinebarger ,

I like the workaround you chose! The white bar I can see at the bottom when I view your stories is very thin, and I have to try to scroll to hit it. I didn't notice it until you pointed out the drawback.

Typically, embedding any other items into a Collection can get tricky with sizing, since that content will not be resized with any iframe height and width you place in the embed link. If sizing on your collection mobile embeds is something you'd like more customization over in the future, I would recommend posting on the ArcGIS Ideas page to request that functionality in the product.

--Abby