Minimum Textbox Width [Twine 2 / Sugarcube 2]

Question

Hi  So I am creating a story where the player/reader is is given the opportunity to provide a custom name in the course of a conversation with a significant character.  Currently I am opting to use 2 prepopulated text boxes as I need the names to be handled separately, by default the text boxes are way to big and I am trying to use CSS to manage the size of these boxes but I seem to be hitting a minimum size value and was hoping someone can suggest a fix or a better method of capturing the information.

- As it stands, this is my CSS

input[type=text]{
      width: 200px;
}

So far I have used percentages with anything less than 50% having no effect and pixels similarly hitting a minimum

 

- and the passage is as follows

“Hi Alexia, I’m <<textbox "$PCName" $PCName "Interview8" autofocus>> <<textbox "$PCLastName" $PCLastName "Interview8">> and I am doing well thank you.”

Thanks for reading

Answer 1

If you suspect that you're running into a minimum width setting, why not either simply try adjusting the minimum width or look it up (see: SugarCube CSS, then core.css)?

Regardless.  Yes, there is a minimum width setting (default: 18em).  Try something like the following to change it:

input[type="text"] {
	min-width: 9em; /* default: 18em */
}

I recommend sticking with em units.

Comments

Many thanks, my HTML is rusty at best and CSS is almost none existent so didnt know how to approach looking that one up, many thanks for the help :)