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; } } }

Story Map Series - issue with main image expanding across

MeganIsaacs

I am using the story map series and am using the main stage to display a diagram. The issue with this is that the text in the side panel overlaps the image and so you cant see behind the image. I want to be able to display the image in the main stage without it going behind the side panel as you can faintly see part of the diagram (a wind turbine) behind the text. Is there a way of doing this? I've tried different ways of displaying the image through a link and uploading but I cant seem to get it to fit.

My story is 'live' so please see the link to the 'Benefits' tab and scroll down to see blue text 'shared ownership diagram'

https://f9.maps.arcgis.com/apps/MapSeries/index.html?appid=8430e8c688dc4bdba24d4da84a4c69b9

Thanks

Megan

Find more posts tagged with

Accepted answers

MeganIsaacs

I have now thought of a work around solution that works. I edited the image to have more space on the left to accommodate for the side panel and chose fit to screen and it now looks fine.

All comments

RupertEssinger

Hi Megan

I'm not super clear on your specific use case because in your Map Series, the main stage for each tab either shows a web map or, in the case of the second tab, an embedded Story Map Journal. None of your tabs are displaying a diagram as main stage content. However you are correct that the description panel is semi-transparent. To prevent an image such as a diagram or infographic from being displayed behind the description panel, try choosing the Center option for its position. This should prevent it from being displayed behind that panel. The Center option isn't available for web maps but it is available for web content you embed.

Story Map Series doesn't have a true non-overlapping Side Panel option like Map Journal does. There's not a way to prevent web maps, images positioned with the 'fill' option, or other content that fills the tab main stage from appearing behind the description panel. You could remove the description panel for tabs with that kind of content, or just have a small description panel with just a bit of text. Another option would be to create a Map Journal with one section, that uses the Side Panel option to display your narrative text and diagram side by side without overlapping, and then embed that Story Map Journal in your Story Map Series.

Hope that helps.

Rupert

MeganIsaacs

Hi Rupert,

Thanks for you information. To try and explain I am using Map Series and in the side panel I am creating an action in the story for the map to change to a graphic when you click on the words. This opens in place of the map but fills the whole screen and goes behind the side panel. I hope this explains a ittle better.

Megan

MeganIsaacs

I have now thought of a work around solution that works. I edited the image to have more space on the left to accommodate for the side panel and chose fit to screen and it now looks fine.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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