Studio X Help Guide

Troubleshooting

When something doesn't look right, and where to learn more.

Something not looking right? Most problems come from a handful of small mistakes. Work down this list.

Half my page disappeared or looks broken

A tag wasn't closed. Every <div> needs a </div>, every <b> a </b>. One missing closing tag can swallow everything after it.
A quote wasn't closed. <a href="https://example.com> is missing its closing ", and everything after it goes strange.
A <style> or <script> was never closed. Then the rest of your content is treated as CSS or JavaScript and disappears.
A comment was never closed. Everything after .

Try removing sections one at a time in the editor (the preview updates as you go) until the problem goes away. The last thing you removed is the culprit. Keep a copy first, or undo with Ctrl/Cmd + Z.

My CSS isn't doing anything

Check the spelling of the property (colour doesn't work; it's color) and of your class names. .Fancy and .fancy are different.
Classes need a dot, ids need a hash in CSS: .fancy for class="fancy", #intro for id="intro". No dot or hash in the HTML itself.
Missing semicolon or brace. Each property: value ends with ;, and each rule needs its closing }. A missing one can break the rules after it.
Something else is winning. When two rules disagree, the more specific one wins (an id beats a class, a class beats a tag). If you're restyling Xinsto's parts, use their ids (see Xinsto Hooks). As a last resort, !important after a value makes it win: color: red !important;.

My JavaScript does nothing

Open the developer console (F12, or Cmd+Option+J in Chrome on a Mac). Errors show up in red with a hint about what's wrong.
Your script runs before the HTML exists. Move your <script> below the elements it uses.
The id doesn't match. getElementById("Clock") won't find id="clock".
JavaScript is picky. Check for missing brackets ( ) { } [ ], missing quotes, and smart quotes (“ ”) pasted from a word processor; it needs plain " or '.
It uses something the sandbox blocks, like alert(), localStorage or a form submit. See What Works Here.
One error stops the whole script. If you have several effects in one <script>, put each in its own <script> block so one problem doesn't stop the others.

My picture won't show up

Use the picture's direct link, ending in .jpg, .png, .gif or .webp, not the link to the page it's on.
The link should start with https://.
Some sites don't allow their pictures to be shown on other sites. Try a different image host.

It looks wrong on my phone

Look for fixed widths like width: 900px. Use max-width or percentages instead.
Give pictures max-width: 100%.
Use a @media (max-width: 600px) { ... } rule to stack columns on small screens (see CSS Basics).
Drag your browser window narrow to test, or open your profile on your phone.

My changes aren't on my profile

Did you click Save Profile? The preview shows unsaved changes; your public profile only updates when you save.
Reload your profile page. Your browser may be showing an older copy.
Is your profile set to private in Display Properties? Then only you can see it.

Be a good neighbour

Describe your pictures with alt="..." so people using screen readers know what's there.
Keep text readable. Light grey on white, or red on blue, is hard to read. Check that your text stands out from its background.
No autoplay sound. Let visitors press play.
Go easy on flashing. Rapid flashing can be dangerous for people with photosensitive epilepsy. Keep blinks slow, and wrap animations in @media (prefers-reduced-motion: reduce) as the examples do, so people who turn motion off get a calm page.
Don't slow people's computers down with hundreds of animations or heavy scripts.

Learn more

MDN Web Docs: free, thorough lessons and a reference for every HTML tag, CSS property and JavaScript feature, with examples. Search it for anything you see in this guide.
W3C Markup Validator: paste your HTML in and it lists the mistakes, like unclosed tags.

Still stuck? Look at how other people built their profiles. View a profile, then open your browser's developer tools to see its code. That's how everybody learned in 2006, too.

« Cookbook