Is there a way to reduce the right margin for a play-in-browser website released by Inform 7?

Question

When you choose to release a game with a website and interpreter in Inform 7, it generates two pages: index.html and play.html.

The index page looks nice. The text has a preset width and stops far away from the right margin.

But with the play page, the text has a wrap-around effect and it runs all the way to the right margin, which I don't think looks any good.

This question probably isn't related to Inform at all, and I imagine you have to edit the CSS files somehow. I'm a complete amateur. Any help would be appreciated!

Answer 1

In the same folder as index.html and play.html is style.css, which contains the parameters for the "gameport" div style:

#gameport
{
    background: white;
    bottom: 0px;
    left: 15.4em;
    line-height: 1.4;
    margin: 0px;
    position: absolute;
    right: 0px;
    top: 0px;

}

"left", "right", and "top" refer to the margins around the division. The line that says "right: 0px;" is the one that says there should be zero pixels between the edge of the gameport and the edge of the browser window. You can change it to a different number of pixels, a number of ems (an "em" is a unit of distance relative to the size of a font...and I forget how they work), or a percentage.

So, if you change that line to "right: 15.4em;", the right margin will be the same size as the left margin, and that might be what you're looking for—but you can try out all kinds of stuff.