Spacing in Story Map Journal text descriptions

2522
6
Jump to solution
01-09-2017 03:47 PM
GeorgePlumley
Occasional Contributor

We have a Story Map journal and would like to have the text in the description appear as single line text, without the large gaps between the lines, is there simple HTML code that will allow us to do just that. I've looked thru the above samples and must be missing it.

Here's a link to the map: http://arcg.is/2hS4IhC

Thanks

0 Kudos
1 Solution

Accepted Solutions
OwenGeo
Esri Notable Contributor

You can override the line spacing in Journal by adding some CSS to the source view (see here for help on how to do this). The line spacing of Journal's home (1st) section is different that the rest of the sections. Below is some CSS that targets some display attributes of the home section text; just remove .section:first-child if you want CSS that applies to sections other than the home section.

For side panel layout

.sidePanel .section:first-child {
  margin-top: -8px;
  margin-bottom: 20px;
}
 
.sidePanel .section:first-child .title {
  font-size: 2.3em; /* usually 1.5em */
  padding: 10px 0; /* usually 0? */
  line-height: 1.3em; /* usually 1.5em */
  font-weight: normal;
}
 
.sidePanel .section:first-child .content {
  font-size: 20px; /* usually 16px */
  min-height: 150px;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

For floating panel layout

.floatingPanel .section:first-child .title {
  margin-top: 25%;
  margin-bottom: calc(10% - 30px);
  font-size: 2.3em; /* usually 1.85em */
  line-height: 1.3em; /* usually 1.5em */
}
 
.floatingPanel .section:first-child .content {
  font-size: 20px; /* usually 16px */
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Owen Evans
Lead Product Engineer | StoryMaps

View solution in original post

0 Kudos
6 Replies
OwenGeo
Esri Notable Contributor

I branched the discussion to a new thread.

Owen Evans
Lead Product Engineer | StoryMaps
RebeccaStrauch__GISP
MVP Emeritus

...and I made it a question instead of a discussion.  Tend to get more views that way.

ChrisB_
New Contributor

I have this exact same problem.  Has anyone made any progress with this problem of line spacing?

0 Kudos
OwenGeo
Esri Notable Contributor

You can override the line spacing in Journal by adding some CSS to the source view (see here for help on how to do this). The line spacing of Journal's home (1st) section is different that the rest of the sections. Below is some CSS that targets some display attributes of the home section text; just remove .section:first-child if you want CSS that applies to sections other than the home section.

For side panel layout

.sidePanel .section:first-child {
  margin-top: -8px;
  margin-bottom: 20px;
}
 
.sidePanel .section:first-child .title {
  font-size: 2.3em; /* usually 1.5em */
  padding: 10px 0; /* usually 0? */
  line-height: 1.3em; /* usually 1.5em */
  font-weight: normal;
}
 
.sidePanel .section:first-child .content {
  font-size: 20px; /* usually 16px */
  min-height: 150px;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

For floating panel layout

.floatingPanel .section:first-child .title {
  margin-top: 25%;
  margin-bottom: calc(10% - 30px);
  font-size: 2.3em; /* usually 1.85em */
  line-height: 1.3em; /* usually 1.5em */
}
 
.floatingPanel .section:first-child .content {
  font-size: 20px; /* usually 16px */
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Owen Evans
Lead Product Engineer | StoryMaps
0 Kudos
Bubacz_Hannah
New Contributor III

You can also hit CTRL+ENTER at the end of a line.

0 Kudos
BryAnnaVaughanDOT
New Contributor

I got so excited when I saw this solution. Sadly, it didn't work for me...but, Shift+Enter did.  Thanks so much!

0 Kudos