Code for having 2 images side-by-side in a passage

Authoring Twine
,
1

Please specify version and format if asking for help, or apply optional tags above:
Twine Version: Twine 2.3.14
Story Format: Harlowe

Hi, I’m trying to make my passage look like this:
Picture1

Using some CSS codes I found in the old forum:

tw-passage {
  text-align: center; 
  color: black;
  margin: auto;
  padding: auto;
    background-color: #ffffff;
    opacity: .90;
    filter: alpha(opacity=80);
}

tw-link {
color:blue;
}
.enchantment-link:hover, tw-link:hover {
 color: red;
}

tw-sidebar {
	display: none;
}

/* Below are the BGI Tags */

tw-story[tags~="Room"] {
 background-image:url("https://wallpapercave.com/wp/wp6183056.png");
 background-size:cover;
 background-repeat:no-repeat;
 background-position:center center;
 background-attachment: fixed;
}

/* CSS for side by side  */


.leftcolumn {
	float: left;
  	width: 40%;
  	margin-right: 20%;
}

.rightcolumn {
 	margin-left: 60%; 
}

Passage codes:

 This is what your feed looks like...
 <div class="leftcolumn">
    <img src="https://i.postimg.cc/Y9jfjPy2/fb1.png" alt="Phone" style="width:100%">
  </div>
  <div class="rightcolumn">
    <img src="https://i.postimg.cc/G2NPDjZF/fb2.png" alt="Post" style="width:100%">
  </div>
  
  (align:"==>")+(box:"=========XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX=")[[Continue]]

But when I apply and preview my passage, it looks like this:

423×511 153 KB

What should be changed in the code or are there any suggestions so I can produce the lay out similar to the 1st image?

Thank you!

2

It is probably better to use absolute positioning in this case. Give each image a class tag,


<img class="imageA" src="URL">

<img class="imageB" src="URL">

then in your stylesheet add:

.imageA {position: absolute; top: 20px; left: 30px}
.imageB {position: absolute; top: 20px; left: 300px}

For an example, try this. You can change the px values above the break to make the boxes closer together or farther apart.

Try replacing absolute with relative if your images are in a div.

3

By default all line-breaks within the content of a Passage are automatically converts to HTML <br> elements, and these can effect the outcome of CSS styling.

Your current Passage content generates a HTML structure something like the following, which I have simplified slightly. You can use your web-browser’s Web Developer Tools to see the full structure.

<tw-passage tags="">
	<!-- HTML elements of left sidebar removed... -->
	This is what your feed looks like...
	<br>
	<div class="leftcolumn" data-raw="">
		<br>
		<img src="https://i.postimg.cc/Y9jfjPy2/fb1.png" alt="Phone" style="width:100%" data-raw="">
		<br>
	</div>
	<br>
	<div class="rightcolumn" data-raw="">
		<br>
		<img src="https://i.postimg.cc/G2NPDjZF/fb2.png" alt="Post" style="width:100%" data-raw="">
		<br>
	</div>
	<br>
	<br>
	<!-- HTML elements of right aligned link removed... -->
</tw-passage>

…and the <br> elements within the two <div> elements (especially the rightcolumn one) are what’s causing the imaged not to alight vertically.
You can use Collapsing whitespace markup to suppress those unwanted <br> elements…

{
<div class="leftcolumn">
	<img src="https://i.postimg.cc/Y9jfjPy2/fb1.png" alt="Phone" style="width:100%">
</div>
<div class="rightcolumn">
	<img src="https://i.postimg.cc/G2NPDjZF/fb2.png" alt="Post" style="width:100%">
</div>
}

There are also some issues with your CSS:

  1. The padding property doesn’t support an auto value.
  2. The filter property doesn’t support an alpha() function, it does however support an opacity() function. So maybe you meant to write filter: opacity(80);