nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Working with Story Map Journal (and Shortlist) on different screen sizes

BethanyBalisky

When I create a Story Map Journal based on a certain screen/monitor size, I size the text, custom sizing of web page content, etc. according to how it looks best on that monitor. When I pull up the same story map on another computer with different size, the text, content and etc. do not scale automatically but instead are disproportionate. What's the best way, if any, to work around this?

Trouver plus de publications taguées avec

Accepted answers

oevans_storymaps

Hi Bethany -- thanks for posting your question. Story Maps are responsively designed so that the on-screen elements, like the side panel, will resize based on different screen resolutions, browser window sizes, and aspect ratios. Also, below a certain size the layout will switch over to something that is more mobile friendly. Currently, however, the text doesn't resize (other than when the story switches over to the mobile view).

Could you please share the resolutions of the two monitors you are working with and perhaps even screenshots of the text and content on each monitor? It'd be helpful to see the differences you are seeing so we can consider addressing this in a future release.

You may be able to design around this by choosing an overall smaller text size that looks better at more resolutions. Also, developers can download the code for our Story Map apps here on Github and customize it with HTML, CSS, or JavaScript to add behaviors that aren't currently included. You can read more about how to do that here.

All comments

oevans_storymaps

kmsmikrud

Hi,

I have a question related to Bethany's and wonder if someone might have info on how to customize the HTML, CSS, or JavaScript to accommodate. I have Story Maps in the Shortlist template and just noticed they now have the autoplay function included. We currently have the Story Map running at times on the front desk large screen on the wall behind the counter. While the Story Map looks great on a regular computer sized screen on the monitor the size of the map looks to take up too much of the screen and it would be nice if the location photos/text could be bigger. Is there a way to include code for screens larger than......to modify the size of the location photo or ratio of the location photo to the map?

The information folks thought it looked good but currently would look even better if we could modify the photo/text size in the location box. We do have the code hosted on our server but I'm not exactly sure what I would modify to get the effect we would like.

Thanks in advance!,

Kathy

RupertEssinger

Hi Kathy

Good point. Unlike the other Story Map apps with side panels, (Map Journal, Map Series and Map Tour), which automatically display that side panel at at width relative to the width of the entire display window, Story Map Shortlist's side panel, which shows the tabs containing the places is a bit more constrained because it contains tiles. It displays the tiles in 2, 3, or 4 columns depending on the size of the display, but doesn't get any wider than 4. So if you have a very wide display, or if you stretch the browser window displaying a Shortlist (example Shortlist if anyone needs ones and wants to try) so it goes over two monitors (such as your primary and secondary monitor) you'll notice that the side panel doesn't get wider than 4 columns, so when you are viewing specific places their pictures are fairly small compared to the map. We should perhaps bump this up a bit more so that on very wide displays, we'd display one or two more columns of tiles in the tabs, which would therefore make the panel wider too when a single place is being displayed. I'm not sure how easy it would be to do that customization yourself. I can ask our dev when he is back from vac unless there is another Geonetter who has tried this.

Do you know the display size/aspect ratio of the monitor you are using? Is it a wider aspect ratio than the standard wide screen monitor (mine is 1920x1080). Or would it be possible for you to take a picture of your Shortlist running on the monitor behind your counter we can see what it looks like (assuming it is OK for public consumption and not classified material or location).

Rupert

oevans_storymaps

I'd also suggest trying the browser zoom to increase the size of all the on-screen elements. How it works will depend on the resolution of the display, but it might help for the very wide screen.

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.