NARROW-VIEWPORT TEST · OCTOBER 10, 2026
Roblox Shirt Template at 320px: A Narrow-Screen Placement Check
At a 320-pixel browser width, the editor canvas and export controls fit without horizontal overflow. Our controlled placement test produced a 287 × 274 CSS-pixel canvas; a 100 × 100 image at 15% Image size exported as an 84 × 84 mark fully inside the 128 × 128 TORSO FRONT guide. Use a small imported mark, then inspect the downloaded 585 × 559 PNG before testing in Studio.
This is a browser-layout and exported-PNG check at 320 pixels wide. It is not a test of a physical phone, native file picker, pinch gesture, or a Roblox Studio render.
What fits at 320 pixels
A narrow screen does not change the Classic Shirt canvas in the saved file. Roblox documents Shirts as wraparound image assets and gives the front torso panel a 128 × 128 layout region. The screen only changes the editor's displayed canvas and controls. In our emulated 320 × 844 browser, the document remained exactly 320 pixels wide: there was no horizontal page overflow.
Original narrow-screen schematic
Proportional illustration based on the test layout, not a screenshot. The red mark represents the exported 84 × 84 test square positioned within TORSO FRONT.
Our 320-pixel placement check
We opened this editor in a 320 × 844 mobile-emulated browser, generated a solid-red 100 × 100 PNG, imported it, set Image size to 15%, and used a controlled canvas pointer drag from canvas center to the front-guide center. We then captured the actual Download PNG blob and decoded its red-pixel bounds. This checks the site's layout and its export result; it does not simulate a person's finger accuracy.
| Check | Measured result | Why it matters |
|---|---|---|
| Document width | 320 CSS px | No horizontal overflow in the tested viewport. |
| Displayed canvas | 287 × 274 CSS px | The full Shirt canvas remained visible in the narrow layout. |
| Download button | 289 CSS px wide | The export control fit within the viewport. |
| Saved PNG | 585 × 559 px | Screen width did not change the Classic Shirt export dimensions. |
| Red mark after drag | x 150–233; y 213–296 (84 × 84 px) | Entirely inside FRONT: x 128–255, y 191–318. |
The mark left 22 pixels to the left and right guide edges and 22 pixels above and below: 128 − 84 = 44 pixels of spare width, split evenly when centered. That symmetric margin is more useful as a visual safety buffer than a claim that every logo or fingertip will behave the same way.
Use the narrow-screen workflow
- Choose Classic Shirt first. Roblox distinguishes a wrapping Shirt from a square Classic T-Shirt, so select the garment before importing artwork.
- Start with a compact transparent PNG. Trim unneeded transparent margins; they change the visible size at a fixed Image size setting. Our padding test shows why.
- Keep the first attempt small. Place the visible mark within TORSO FRONT rather than against a guide boundary. A 15% square test left 22 pixels around the mark in this measured export.
- Download and inspect the file. Confirm the export is 585 × 559 and check the mark's space around the guide area. Narrow layout does not guarantee a real design's placement.
- Test in Studio before upload. Roblox recommends using a Block Avatar rig, adding a Shirt object, and assigning the uploaded image to ShirtTemplate.
What this check does and does not answer
| Question | Answer from this test |
|---|---|
| Will the page force sideways scrolling at 320 px? | Not in this emulated 320 × 844 run; document width stayed 320 px. |
| Does a narrow view change exported Shirt dimensions? | Not in this run; the downloaded PNG was 585 × 559. |
| Can a centered 15% square remain inside FRONT? | Yes, after the controlled pointer drag: its 84 × 84 red bounds were fully inside the 128 × 128 guide. |
| Can every person place art accurately with a finger? | Unknown. A physical-device touch-drag study is still needed. |
Test limit: Browser emulation and a controlled pointer event are evidence for this site's responsive layout and export behavior, not evidence about iOS/Android file-picker behavior, pinch accuracy, accessibility text scaling, Studio fit, or Marketplace approval.
Sources and method
- Roblox Creator Hub: Classic clothing — primary source for classic garment types, panel dimensions, Studio testing, and ShirtTemplate.
- Avatar Shirt Maker editor — first-party October 10 narrow-viewport import, controlled placement, and decoded Download PNG test.
The reproducible test script and results are retained in the project audit folder. The measurement table, margin calculation, layout schematic, workflow, and limits table were produced for this article.