Harlowe and Stylesheet: inline-block issues

Authoring Twine
1

I’ll preface this by saying I have absolutely no experience with much CSS or HTML, for that matter. However, I have been picking my brain trying to figure out how to fix this to, currently, no avail.

For some context-- I’m making a ‘card game’ in Twine using Harlowe’s language, specifically Harlowe 3. Weird, I know, but I’m enjoying a creative project. As it stands, I can nicely line up div containers in a neat row with a background image using the following:

.img-container-card
{
  background-image: url("https://i.imgur.com/OnGsvTd.png");
  width: 300px;
  height: 400px;
  text-align: center;
  display: inline-block;
}

For the most part, this functions. When I’m displaying card details, I simply use the (display:) macro to show something from a similarly named passage as a variable I’m using. However, it’s then that I run into an issue: for reasons that currently escape me, the verticality of the card’s contents is shunting the cards out of position.

Here’s a link showing what I mean: Here.

I put borders on the containers to be sure and it doesn’t seem like the image or content is being thrown out of position, but the entire thing itself. And it’s random, too: as the contents of the cards change, they rise and fall out of position. It seems to be specifically to do with the length of each (display:) passage, for the ones that are only 7 lines long don’t cause an issue compared to longer ones.

Does anyone know how I can fix this issue? The conents of each card already take up barely half the card itself and I don’t want to have to cut it down even more just to fix it.

Here’s my body code, just in case:

tw-passage
{
  font-family: 'Della Respira', serif;
  font-size: 18px;
  text-align: center;
  line-height: 1.5em;
  margin-left: -40px;
  margin-right: -40px;
}

Thanks in advance.

2

Hmm. I don’t think there’s enough code here to diagnose the problem. Not for me, anyway.

Have you tried using the browser’s inspector to see what’s going on? Right-click the card and choose Inspect. Then you can mouse over elements in the inspector to have them highlighted on the screen so you can see which things are being shifted and why, maybe?

3

I have inspected the elements. I highlighted each div container but I can’t see anything out of the ordinary.

I have created a test story containing my base stylesheet as well as the div containers I’m currently using, in the hopes it might help pinpoint the issue.

You can check it here: Here.

4

Ohhh. Try vertical-align: top; in your .img-container-card style, maybe? I think the default is baseline so they’ll move relative to that based on how tall they are (and maybe the behavior isn’t consistent across browsers?).

1 Like
5

This worked! Thanks so much for your help!