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

VS Code build CSS Grid Character Sheet Not Working Right In Preview or Sandbox

May 07 (3 years ago)

Edited May 07 (3 years ago)

I am building my first custom character sheet. I am using VScode. When I run it on my machine everything is looking ok:

But when I go to see how it would look in the Sandbox....



On the games Custom Character Sheet Html/Css/Preview it doesn't look too bad at all:



Here is a link to my HTML and CSS. I'm very new to HTML and CSS but have other programing experience, so I'm sure there something I am missing. Any help would be appreciated.

Pen IO Link

May 07 (3 years ago)

Edited May 07 (3 years ago)
GiGs
Pro
Sheet Author
API Scripter

Two things here: you should never prototype sheets outside of Roll20, and should never trust the Preview window.


The only ways to test a Roll20 sheet are a) fully load a game, don't use the preview, or b) use the sandbox. It's almost as fast as using codepen.


Create your code in separate *.html and *.css files (which if you are using VS Code you're probably doing already), and create a game in the custom sheet sandbox, and load them in there. You can then inspect the browser (rightlick on anything on the sheet and click Inspect Element), and make temporary changes the the CSS to see what you need to add to your files.


PS: I'm pretty sure underlining like this isnt supported on Roll20:

<u> Exp</u>

You need to give the class an underlining CSS property. (like text-decoration:underline)