How to Fix Roblox GUI Scaling — Complete Roblox Guide

Why GUIs break on different screens

A position of UDim2.new(0, 100, 0, 50) means "100 pixels from the left, 50 pixels from the top" — regardless of screen size. On a 4K monitor that is barely off the corner; on a phone that is a third of the way across the screen. UDim2 stores two numbers per axis: a Scale (percentage of parent) and an Offset (raw pixels). Most beginners build with Offset because it feels predictable in Studio's emulator, then ship a UI that breaks the moment a real player loads it. The mental model that fixes everything: think in percentages first, pixels only for borders. If a button is supposed to take half the screen width, write {0.5, 0} — not {0, 720}.

The safe default rule

Use Scale (the first number in each pair) for layout — Position, Size, anchors. Use Offset (the second number) only for fixed-pixel concerns like a 1-pixel border, a 4-pixel padding, or an icon that must stay 32×32 regardless of device. The rule of thumb: if you cannot answer "why this exact pixel count" in one sentence, the answer is Scale.

local frame = Instance.new("Frame")
-- 50% of parent width, 50% of parent height, no offset
frame.Size = UDim2.new(0.5, 0, 0.5, 0)
-- Centered on the screen
frame.Position = UDim2.new(0.5, 0, 0.5, 0)
frame.AnchorPoint = Vector2.new(0.5, 0.5)
frame.Parent = screenGui

AnchorPoint keeps things centered

Set AnchorPoint to (0.5, 0.5) and Position to (0.5, 0, 0.5, 0) to center any element without manual math. AnchorPoint moves the origin of the element to the named point — (0, 0) is top-left, (1, 1) is bottom-right, (0.5, 0.5) is the center. Without an AnchorPoint set, Position is measured from the element's top-left corner, which means "center the panel" requires you to subtract half its size manually. AnchorPoint removes that subtraction. This single change is the most common fix for "my menu drifts toward the bottom-right on bigger screens."

UIAspectRatioConstraint for icons and square buttons

Scale-based sizing stretches elements with the parent. That is great for panels, terrible for circular avatars or square skill icons. Add a UIAspectRatioConstraint as a child of any element that must keep its proportions — pass an AspectRatio of 1 for squares, 16/9 for video frames, etc. Roblox handles the math at render time; you just declare the ratio.

local icon = Instance.new("ImageLabel")
icon.Size = UDim2.new(0, 64, 0, 64) -- starting size

local ratio = Instance.new("UIAspectRatioConstraint")
ratio.AspectRatio = 1 -- 1:1, always square
ratio.AspectType = Enum.AspectType.ScaleWithParentSize
ratio.DominantAxis = Enum.DominantAxis.Width
ratio.Parent = icon

UISizeConstraint for min/max bounds

Scale alone has no floor. On a tiny screen your 50%-wide button might shrink to 120 px, which is too small to tap. Add a UISizeConstraint with a MinSize to enforce a hard floor (and MaxSize to prevent comically wide buttons on ultrawide monitors). Pair it with Scale-based Size — Scale describes intent, the constraint enforces playability.

Three common scaling traps

Trap 1: building everything in Offset because Studio's default canvas is 1024×768. Trap 2: forgetting that ScreenGui has an IgnoreGuiInset property — if you do not set it to true, the top-left of the screen has 36 px of phantom space reserved for the Roblox top bar. Trap 3: using TextScaled = true on every label. TextScaled fits the largest text the box can hold, which means 12-character labels render at a different size than 4-character labels. Use TextSize with a UITextSizeConstraint instead, or set TextScaled = true plus TextSize as a max.

Step-by-step summary

1. 1

   Replace hard offsets with scale

   Audit every Size/Position pair and move layout values into the Scale component. Offsets stay only for borders, padding, and fixed-pixel icons.

2. 2

   Anchor from the center

   Set AnchorPoint (0.5, 0.5) on every centered panel and button so they stay put when the parent resizes.

3. 3

   Constrain aspect ratios on icons

   Add UIAspectRatioConstraint to any ImageLabel or square button so circles stay circular on every device.

4. 4

   Floor your touch targets

   Add UISizeConstraint with MinSize 44×44 px on every button — this is the WCAG/Apple/Google touch-target floor.

5. 5

   Test on all devices

   Use the device preview in Roblox GUI Maker or Studio's emulator (View → Device → iPhone 14, iPad Pro, 1080p).

FAQ