Setting display width in CSS Problem

This is perhaps outside the scope of this forum, although I imagine most folks here are polyglots computer-language-wise at least.

I’m trying to adjust the width of the output within for a monitor within the .css (which I know a little bit more about than Inform7) and I’m not sure where to do it.

I’ve tried adjusting things all over and even pointed to a new .css in the html just to check I wasn’t dealing with a sever lag issue.

In the play.html it references #windowport div but that’s not in the style.css.

I can write a new css but it seems like this would be a simple adjustment plenty of folks have done before.

Ah, it looks like the div within the #windowport has position: absolute so it’s relative to its nearest “positioned” ancestor. Adding #windowport { position: relative; max-width: 60ex; } to style.css does what I think you’re looking for, but I didnt look through the whole layout and code carefully: there may well be a better way to do it…

It’s better to write CSS to adjust the position of #gameport, and let the interpreter manage #windowport.

(#windowport is normally defined to fill #gameport.)

2 Likes

If you’re asking about the line-length, for the text in the main window, modify the BufferLine class, e.g.,

.BufferLine {
    width: 40rem;
}

I have tried the four following configurations with no discernable effect.

#gameport
{
	background: white; 
	bottom: 0px;
	left: 15.4em;
	right: 15.4em;
	line-height: 1.4;
	margin: 0px;
	position: absolute;
	right: 0px;
	top: 0px;
}
#windowport { 
    position: relative; 
    max-width: 60ex;
    
}
#gameport
{
	background: white; 
	bottom: 0px;
	left: 15.4em;
	line-height: 1.4;
	margin: 0px;
	position: relative; 
        max-width: 60ex;
	right: 0px;
	top: 0px;
}
.BufferLine {
    width: 40rem;
}

The Firefox DevTools let you dynamically edit CSS in Firefox. The Chrome DevTools let you dynamically edit CSS in Chrome

Here’s an example game from Zarf’s Quixe website.

I’m seeing a change when I set a width on BufferLine or a max-width on #gameport. Are you sure your CSS file is being loaded? Try putting your CSS directly into your play.html within the <style> element (within the <head> element).

@Zed That’s a blast from the past, and a great idea.

I’ve tried loading in new sheets and changing them but I’ll put it up top.

I’'ve got a new server host so maybe it is slower than I am used to.

@zed. That seemed to work but there is definitely a serious lag going on.

I’ve placed it in the .css and I’ll wait it out. I want the mobile experience to be unaffected.

Thank you for your help.