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
Solved! Go to Solution.
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 */
}
...and I made it a question instead of a discussion. Tend to get more views that way.
I have this exact same problem. Has anyone made any progress with this problem of line spacing?
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 */
}
You can also hit CTRL+ENTER at the end of a line.
I got so excited when I saw this solution. Sadly, it didn't work for me...but, Shift+Enter did. Thanks so much!