Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Help with a character sheet's width

September 14 (3 years ago)

Hi. I cobbled together a character sheet, but it is too wide, and I don;t have the skills to make it adapt to the browser's window width. 

Can someone help me out? 

Ideally I'd make all those drop downs way narrower, and make the Description box at the bottom bigger, but I have no idea how. Any help? 

https://pastebin.pl/view/d5cc9936



September 14 (3 years ago)

Edited September 14 (3 years ago)
vÍnce
Pro
Sheet Author

Just a quick look...
it appears your code is probably not using a stylesheet (css).  ;-(  I would suggest learning some css basics and replace as much of the inline css as possible.  You will be able to make sheet-wide formatting changes WAY easier. ;-)

You can include a css rule to adjust the default width of your selects.  Assigning class names to your html elements would allow you to target specific sections for styling, but here's something that should help immediately.

.charsheet table select {
  max-width: fit-content;
}

You might need to go in and change some of those hard coded (inline width) assignments as well. You can also enclose your code in a outermost wrapper div with a fixed width to help contain the sheet, but overflowing content will either need to be scrolled or hidden if the inner content is too wide. yuck.

Cheers

September 14 (3 years ago)
GiGs
Pro
Sheet Author
API Scripter

And the next bit of advice: don't use tables for layout. They are really easy to use, so it's understandable to use them, but CSS Grid is even easier to use once you know what you are doing.

September 14 (3 years ago)

Thanks for the help, zero chance of any of that.

I ran a word document through an HTML converter to get this, I have no idea what CSS is or how to use it.

I'll stick to the wide sheet, it's inconvenient but does the job. Thanks!