Need help removing spaces between rows of images

Authoring Twine
#1

Twine Version: 2.3.4
Story Format: Sugarcube 2.29.0

I want to have a 2x2 grid of clickable images, but there’s a gap between the two rows that I can’t get rid of.

2rows

I’m trying to make that into a solid gray square, without the brown line in the middle. It’s in the StoryCaption passage so that it appears in the sidebar.

I don’t know enough about HTML (or CSS) to fix this. Here is the code I am using:

<a data-passage="$topLeft"><img @src=$topLeftImg width=50%></a><a data-passage="$topRight"><img @src=$topRightImg width=50%></a>
<a data-passage="$bottomLeft"><img @src=$bottomLeftImg width=50%></a><a data-passage="$bottomRight"><img @src=$bottomRightImg width=50%></a>

Please excuse my ignorance, and thank you for your help.

#2

The space is a line break, so either put a line continuation at the beginning of the second line or simply make them one line. For example:

<a data-passage="$topLeft"><img @src=$topLeftImg width=50%></a><a data-passage="$topRight"><img @src=$topRightImg width=50%></a>
\<a data-passage="$bottomLeft"><img @src=$bottomLeftImg width=50%></a><a data-passage="$bottomRight"><img @src=$bottomRightImg width=50%></a>
#3

I tried making it one line, but that didn’t work. Then I tried the line continuation, and it still displayed the line break.

After that, I ignored the warning in the documentation link you provided and wrapped the whole thing in <nobr> tags, so this happened:

tshape
tshape357×542 1.12 KB

Should I be using a different approach to have 4 images display in an unbroken square?

#4

Ah. Mistook what you were attempting there.

The large space there is from the default line-height used to make the text more readable.

Try wrapping the images in a <div> and setting its line-height to 0. For example:

<div style="line-height: 0;">
<a data-passage="$topLeft"><img @src=$topLeftImg width=50%></a><a data-passage="$topRight"><img @src=$topRightImg width=50%></a>
<a data-passage="$bottomLeft"><img @src=$bottomLeftImg width=50%></a><a data-passage="$bottomRight"><img @src=$bottomRightImg width=50%></a>
</div>

Ideally, you’d make a class out of that for reuse, but you should get the general idea.

1 Like
#5

Perfect! That was exactly what I needed.

And you’re right, making a class out of it helps format other parts of the story. Thanks!