How to make two buttons responsive (=horizontally and centered)?

mangosoup

Hello, dear Twine Community,

been struggling with this problem like forever and decided to directly ask you.

Anyway, I am using Twine Version 1.4.2, Storyformat Jonah.

After a text in passage 1, I use a script "timedtogo" to automatically jump to passage 2.
Passage 2 consists only of two buttons and looks like as following:

<<button passage name 1>><<button passage name 2>>

What I want to do is to have these two buttons next to each other at all times (horizontally) and centered (their positions should always stay in the middle). Now if I look at the site on my smartphone, the buttons are not next to each other anymore, but below each other. On my browser, everything looks like.

Is there a way to make these "buttons" responsive (=permanently horizonally and centered)?

I hope you can help me! Thanks in advance!

Cheers!

greyelf

You can use Tagged stylesheets to apply style to selected passages, in your case the ones containing just buttons.

eg. add a tag (like buttons) to each of the passages containing buttons, and create a Stylesheet passage and add the same tag to it.

Add the following CSS to your new tagged Stylesheet passage, it is one way to center the contents of the relevant button passages.

.passage .body {
	text-align: center;
}

You will need someone with more understanding of CSS than me to tell you how to make a button element automatically change its height, word-wrap, etc... based on the available view-port width.
The only solutions I could think of either replaced the buttons with hyper links (styled as buttons) or used @media queries.

chintznibbles

I'm very far from a CSS expert, but I once had a similar alignment issue that was solved by adding the vertical-align: top; tag to the style of that particular element. That said, if the buttons are getting word-wrapped it may not help. white-space: nowrap; may help in that case. http://www.w3schools.com/cssref/pr_text_white-space.asp gives the options; pre or pre-line could be useful depending on how exactly your buttons are laid out, since those options preserve preformatted whitespaces.

Also, if your centering tags are not playing nicely, sometimes you can force it by using something like

	left: 50%;
	transform: translate(-50%,0);

or

	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);

This page might help out, or at least give some ideas on what to try: https://css-tricks.com/centering-css-complete-guide/

Otherwise, I think you might have to delve into the @media realm like greyelf mentioned. I personally don't really know much about that. If none of this helps, you might try posing the question somewhere like StackExchange or other developer-help sites out there.