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 = labelUse this in your game
View the Main Menu template →
A clean centered main menu: game title, primary Play button in Electric Blue, and secondary action buttons — stacked with a UIListLayout so it stays tidy on any screen size.
Roblox GUI Maker for Main Menus
The main menu is the first thing players see when they join. It needs a title, a clear primary action (Play), and secondary buttons stacked neatly — and it has to look the part.
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.