Spacing in Story Map Journal text descriptions

GeorgePlumley

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

oevans_storymaps

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

<SPAN class="selector token">.sidePanel .section:first-child</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">margin-top</SPAN><SPAN class="punctuation token">:</SPAN> -8px<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">margin-bottom</SPAN><SPAN class="punctuation token">:</SPAN> 20px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
 
<SPAN class="selector token">.sidePanel .section:first-child .title</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 2.3em<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">/* usually 1.5em */</SPAN>
&nbsp; <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 10px 0<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">/* usually 0? */</SPAN>
&nbsp; <SPAN class="property token">line-height</SPAN><SPAN class="punctuation token">:</SPAN> 1.3em<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">/* usually 1.5em */</SPAN>
&nbsp; <SPAN class="property token">font-weight</SPAN><SPAN class="punctuation token">:</SPAN> normal<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
 
<SPAN class="selector token">.sidePanel .section:first-child .content</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 20px<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">/* usually 16px */</SPAN>
&nbsp; <SPAN class="property token">min-height</SPAN><SPAN class="punctuation token">:</SPAN> 150px<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

 

For floating panel layout

<SPAN class="selector token">.floatingPanel .section:first-child .title</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">margin-top</SPAN><SPAN class="punctuation token">:</SPAN> 25%<SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">margin-bottom</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="token function">calc</SPAN><SPAN class="punctuation token">(</SPAN>10% - 30px<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
&nbsp; <SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 2.3em<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">/* usually 1.85em */</SPAN>
&nbsp; <SPAN class="property token">line-height</SPAN><SPAN class="punctuation token">:</SPAN> 1.3em<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">/* usually 1.5em */</SPAN>
<SPAN class="punctuation token">}</SPAN>
 
<SPAN class="selector token">.floatingPanel .section:first-child .content</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp; <SPAN class="property token">font-size</SPAN><SPAN class="punctuation token">:</SPAN> 20px<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">/* usually 16px */</SPAN>
<SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>