Best way to preserve screen layout (for small screens)?

Question

So, I think I've done well to keep all my passages pretty easy to use on the smallest of phone screens (320x480). Or, that's probably the smallest I'll consider supporting.

Here's a pic of one section:

https://ibb.co/eECgBb

https://ibb.co/mu73Pw

So, even though it looks a bit ugly with a big browser window, it's suitable for tiny phones. I'd like to keep that, but I would actually like to shift things more into the center. Maybe not even directly into the middle. Just right-adjusted a bit, indented. But if I use a span to introduce padding up and down the entire column, I think it'd just move things across on the phone's screen too.

So... anyone got a solution? Or idea? Or method?

Not that I'm overly concerned about it. It's just a cheat section anyway, so I don't mind it looking like users aren't supposed to mess with it. But, as I say, I think I would like some indenting. Possible? While preserving the structure?

Here's what the format is like:

@@.cheatsTitle;orientation@@@@.noselect;<<cyclinglink "$cycOri" "unset" "heterosexual" "homosexual" "bisexual">>@@<br><br>temperament:<br>@@.cheatsSubTitle;willfulness = @@@@.cheatsNumber;#cheatsWillfulness;<<if $pcStatsWillfulness >= 0>>@@.numberPlus;$pcStatsWillfulness@@<<else>>@@.numberMinus;$pcStatsWillfulness@@<</if>>@@@@.cheats-buttons;<<button "&plus;">><<if $pcStatsWillfulness < 100>><<set $pcStatsWillfulness += 1>><</if>><<replace "#cheatsWillfulness">><<if $pcStatsWillfulness >= 0>>@@.numberPlus;$pcStatsWillfulness@@<<else>>@@.numberMinus;$pcStatsWillfulness@@<</if>><</replace>><</button>><<button "&minus;">><<if $pcStatsWillfulness > -100>><<set $pcStatsWillfulness -= 1>><</if>><<replace "#cheatsWillfulness">><<if $pcStatsWillfulness >= 0>>@@.numberPlus;$pcStatsWillfulness@@<<else>>@@.numberMinus;$pcStatsWillfulness@@<</if>><</replace>><</button>><<button "&plus;&plus;">><<if $pcStatsWillfulness < 100>><<set $pcStatsWillfulness += 5>><</if>><<replace "#cheatsWillfulness">><<if $pcStatsWillfulness >= 0>>@@.numberPlus;$pcStatsWillfulness@@<<else>>@@.numberMinus;$pcStatsWillfulness@@<</if>><</replace>><</button>><<button "&minus;&minus;">><<if $pcStatsWillfulness > -100>><<set $pcStatsWillfulness -= 5>><</if>><<replace "#cheatsWillfulness">><<if $pcStatsWillfulness >= 0>>@@.numberPlus;$pcStatsWillfulness@@<<else>>@@.numberMinus;$pcStatsWillfulness@@<</if>><</replace>><</button>>@@<br>

That's just the first of the +/- subsections.

And here's the css rules:

.cheatsTitle {
	display: inline-block;
	width: 6em;
	text-align: left;
}

.cheatsSubTitle {
	display: inline-block;
	width: 6em;
	text-align: right;
}

.cheatsNumber {
	display: inline-block;
	font-weight: bold;
	width: 2em;
	text-align: right;
}

.numberPlus {
	color: #1c96c5;
}

.numberMinus {
	color: #c94070;
}

.cheats-buttons {
	display: inline-block;
	padding-left: 1em;
	vertical-align: text-top;
}

 

Answer 1

Well, for those curious about this in the future, I worked out how to do this, the way I wanted.

Perhaps look up "@media screen and (max-width: 768px)" and see where that gets you. The trick, I guess is that you need to have that stuff after the formal declaration of the property you're adjusting. So, have this /after/ (in your css).