Layouts

How to Make a Responsive Roblox GUI

Roblox runs on everything from phones to 4K monitors, so a GUI built with fixed pixel sizes breaks on the wrong screen. The fix is to think in Scale (fractions of the screen) instead of Offset (pixels), anchor elements so they recenter, and cap text so it stays readable. This guide covers the four habits behind every responsive Roblox UI.

Open the Main Menu template →

1. Size with Scale, not Offset

UDim2 has a Scale and an Offset component. fromScale(0.4, 0.6) means 40%/60% of the screen — it adapts. fromOffset(400, 600) means fixed pixels — it doesn't.

-- Responsive (adapts to every screen)
panel.Size = UDim2.fromScale(0.4, 0.6)
panel.Position = UDim2.fromScale(0.5, 0.5)

-- Avoid: fixed pixels look wrong on phones or 4K
panel.Size = UDim2.fromOffset(400, 600)

2. Center with AnchorPoint

Position 0.5, 0.5 puts the top-left corner at the screen center. Set AnchorPoint 0.5, 0.5 and the element centers on its own middle instead.

panel.AnchorPoint = Vector2.new(0.5, 0.5)
panel.Position = UDim2.fromScale(0.5, 0.5)

3. Keep text readable

TextScaled grows text to fill its box, which gets huge on big screens. A UITextSizeConstraint caps the max size so it stays tidy.

label.TextScaled = true
local cap = Instance.new("UITextSizeConstraint")
cap.MaxTextSize = 24
cap.Parent = label

Tip: The editor's Desktop / Tablet / Mobile toggle previews the same GUI at each viewport — build with Scale and check all three.

FAQ

Why does my GUI look tiny on a phone?

It's sized in Offset (pixels). Switch to Scale via UDim2.fromScale so the GUI is a fraction of the screen and adapts to every device.

How do I shrink a whole GUI on small screens?

Parent a UIScale to the ScreenGui and set its Scale property (e.g., 0.8) to shrink every descendant together — useful for fitting dense HUDs on phones.