Help removing extra space between header image and passage text

Authoring Twine
1

If you are requesting technical assistance with Twine, please specify:
Twine Version: 2.3.16
Story Format: Harlowe 2.3.2

Hi! I am trying to figure out how to remove the extra space that appears between my header images and the passage text. When I inspect the code related to the area, it appears to be related to the <tw-include type:“header” name=“Header Map” data-raw=""> section (full code below).

Thanks for any advice you can share on what is causing the large gap to appear between the header image and the text!

<tw-include type="header" name="Header Map" data-raw=""><tw-expression type="macro" name="if" title="(if: (passage:)'s tags contains &quot;Day1&quot;)" return="changer"></tw-expression><tw-hook><span class="smaller" data-raw=""><img src="EoEEImages/EEERouteDay1.jpg" data-raw=""></span></tw-hook><br><tw-expression type="macro" name="else-if" title="(else-if: (passage:)'s tags contains &quot;Day3&quot;)" return="changer" class="false"></tw-expression><tw-hook></tw-hook><br><tw-expression type="macro" name="else-if" title="(else-if: (passage:)'s tags contains &quot;Day2&quot;)" return="changer" class="false"></tw-expression><tw-hook></tw-hook><br><tw-expression type="macro" name="else-if" title="(else-if: (passage:)'s tags contains &quot;Day4&quot;)" return="changer" class="false"></tw-expression><tw-hook></tw-hook><br><tw-expression type="macro" name="else-if" title="(else-if: (passage:)'s tags contains &quot;Day5&quot;)" return="changer" class="false"></tw-expression><tw-hook></tw-hook><br><tw-expression type="macro" name="else-if" title="(else-if: (passage:)'s tags contains &quot;Day6&quot;)" return="changer" class="false"></tw-expression><tw-hook></tw-hook><br><tw-expression type="macro" name="else-if" title="(else-if: (passage:)'s tags contains &quot;Day7&quot;)" return="changer" class="false"></tw-expression><tw-hook></tw-hook><br><tw-expression type="macro" name="else-if" title="(else-if: (passage:)'s tags contains &quot;Day8&quot;)" return="changer" class="false"></tw-expression><tw-hook></tw-hook><br><tw-expression type="macro" name="else-if" title="(else-if: (passage:)'s tags contains &quot;Day9&quot;)" return="changer" class="false"></tw-expression><tw-hook></tw-hook><br><tw-expression type="macro" name="else-if" title="(else-if: (passage:)'s tags contains &quot;Day10&quot;)" return="changer" class="false"></tw-expression><tw-hook></tw-hook><br><tw-expression type="macro" name="else-if" title="(else-if: (passage:)'s tags contains &quot;Day11&quot;)" return="changer" class="false"></tw-expression><tw-hook></tw-hook><br><tw-expression type="macro" name="else-if" title="(else-if: (passage:)'s tags contains &quot;Day12&quot;)" return="changer" class="false"></tw-expression><tw-hook></tw-hook><br><tw-expression type="macro" name="else-if" title="(else-if: (passage:)'s tags contains &quot;Day13&quot;)" return="changer" class="false"></tw-expression><tw-hook></tw-hook><br><tw-expression type="macro" name="else-if" title="(else-if: (passage:)'s tags contains &quot;Day14&quot;)" return="changer" class="false"></tw-expression><tw-hook></tw-hook><br><tw-expression type="macro" name="else-if" title="(else-if: (passage:)'s name is &quot;Dragons1&quot;)" return="changer" class="false"></tw-expression><tw-hook></tw-hook><br><tw-expression type="macro" name="else-if" title="(else-if: (passage:)'s tags contains &quot;nomap&quot;)" return="changer" class="false"></tw-expression><tw-hook></tw-hook><br><tw-expression type="macro" name="else" title="(else:)" return="changer" class="false"></tw-expression><tw-hook></tw-hook></tw-include>
2

Please supply the Passage content next time…

If you examine the HTML structure you supplied you will discover that there is HTML Line-break <br> element after each of the Hooks associated with your (if:) macro calls.

So if I extrapolate the header tagged Passage from the HTML element structure you supplied I get something like the following…
(note: example written using TWEE Notation)

:: Header Map [header]
(if: (passage:)'s tags contains 'Day1')[<span class="smaller"><img src="EoEEImages/EEERouteDay1.jpg"></span>]
(if: (passage:)'s tags contains 'Day3')[]
(if: (passage:)'s tags contains 'Day2')[]
(if: (passage:)'s tags contains 'Day4')[]
...

By default Harlowe automatically converts each line-break within the content of your Passage into a <br> element, unless you tell it to do otherwise using either Collapsing whitespace markup or Escaped line break markup.

So simply changing your Passage content to something like the following should remove those unwanted
elements.

{
(if: (passage:)'s tags contains 'Day1')[<span class="smaller"><img src="EoEEImages/EEERouteDay1.jpg"></span>]
(if: (passage:)'s tags contains 'Day3')[]
(if: (passage:)'s tags contains 'Day2')[]
(if: (passage:)'s tags contains 'Day4')[]
...
}
3

Thanks very much for your reply! That was indeed the issue and it is now resolved. I apologize for not including the passage content, and will do so in future.

4

One thing I should of noted is that you can apply CSS classes directly to the <img> element itself, which would possible remove the need for the element you’re wrapping the image with.
eg. you could possible change…

<span class="smaller"><img src="EoEEImages/EEERouteDay1.jpg"></span>

…to be the following instead…

<img src="EoEEImages/EEERouteDay1.jpg" class="smaller">

…thus saving you some typing, and removing unneeded elements from the Document Object Model of the page.

5

Thanks for the tip; that is helpful to know. I will update accordingly.