Embedded Story Map not displaying full screen

4584
7
Jump to solution
12-02-2015 12:07 PM
TyjenConley
New Contributor

I have embedded a completed Story Map on our website, but instead of filling my browser, it leaves an empty white space below. It is filling 100% of the width of the browser, but not the height. I tried changing the embed code so that height was also 100%, but this did not work.

Screen Shot 2015-12-02 at 2.53.31 PM.png

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
StephenSylvia
Esri Regular Contributor

Tyjen, by default, most browsers add a small margin around the body content and the body of the page doesn't have a set height so the 100% height won't work. I've attached a new html page that should give you the results you are expecting. I've also added a few meta tags so your app will switch to the mobile version on smaller screens. You should also add fill in open graph tags and title so Google and other social media sites can understand your page better: https://medium.com/story-maps-developers-corner/grow-your-story-maps-audience-with-open-graph-tags-b...

View solution in original post

0 Kudos
7 Replies
OwenGeo
Esri Notable Contributor

Hi Tyjen - sorry you hare having trouble embedding your story map. Could you post the URL here (or private message it to me) so I can take a look? It's hard to tell what is going on from the screenshot. Is there anything else on this page or are you just trying to get a full page iframe with your story map?

Owen

Owen Evans
Lead Product Engineer | StoryMaps
0 Kudos
TyjenConley
New Contributor
0 Kudos
TyjenConley
New Contributor

Yes, we are trying to get a full screen story map. I'm not sure why it's not working for us, but in all of the examples on your gallery, it shows up as full screen for me:

http://cityofguelph.maps.arcgis.com/apps/MapJournal/index.html?appid=f39b056d38fe460f8269eed11eb3cd6...

G R E E N G U I D E 

0 Kudos
StephenSylvia
Esri Regular Contributor

Tyjen, by default, most browsers add a small margin around the body content and the body of the page doesn't have a set height so the 100% height won't work. I've attached a new html page that should give you the results you are expecting. I've also added a few meta tags so your app will switch to the mobile version on smaller screens. You should also add fill in open graph tags and title so Google and other social media sites can understand your page better: https://medium.com/story-maps-developers-corner/grow-your-story-maps-audience-with-open-graph-tags-b...

0 Kudos
TyjenConley
New Contributor

Thank you, this worked!

0 Kudos
TyjenConley
New Contributor

Thank you!

TYJEN T. CONLEY

Web Communications Manager

PRB | Inform. Empower. Advance.

POPULATION REFERENCE BUREAU

1875 Connecticut Ave., NW | Suite 520

Washington, DC 20009-5728 USA

202-939-5475 PHONE | 202-328-3937 FAX

tconley@prb.org<mailto:tconley@prb.org> | www.prb.org<http://www.prb.org>

PRB on: Twitter<http://www.twitter.com/prbdata> | Facebook<http://www.facebook.com/pages/Population-Reference-Bureau/58501419511> | YouTube<http://www.youtube.com/prbnet> | Soundcloud<http://www.soundcloud.com/populationreferencebureau>

0 Kudos
OwenGeo
Esri Notable Contributor

Tyjen,

Great - glad Stephen was able to help.

...and by the way EXCELLENT job on the story map -- it looks fantastic!  If you are interested please submit it to our Story Maps gallery. You can do this in the My Stories section of the Story Maps website. Just log in to your ArcGIS Online account, find your story in the list, click to expand it, click Gallery, and follow the instructions there.

 2015-12-03 at 7.34.29 AM.JPG

Owen

Owen Evans
Lead Product Engineer | StoryMaps
0 Kudos