Responsive isometric scenes need a plan for narrow screens. Sometimes the answer is to scale everything down with clamp(), and sometimes it is to hide secondary blocks entirely. What rarely works is letting the scene overflow sideways, which makes the page scroll horizontally and feels broken on a phone.
Save time
Keep a copy of the finished scene in your snippets. Most new illustrations start as a small change to an old one.
JS
const sorted = tiles.toSorted((a, b) => (a.x + a.y) - (b.x + b.y));for (const tile of sorted) { scene.append(tile.element);}
Comments