Buttons moving up when viewing UI from a smaller screen in the emulator

Help and Feedback Art Design Support
#1

I have a shop UI with two buttons at the very top promoting specific things (hidden to prevent leaks). The buttons look fine on my PC screen, but when I go to Test > Device and look at the UI on a smaller device, the buttons move up.

They’re being contained inside of a frame which you can see the outline of in the screenshots provided. This doesn’t happen with the “Store” and close button at the top of the screen.

Can someone explain what I’m doing wrong, please? I can’t figure out what the issue is. I’ve already tried experimenting along with looking on the DevForum.

Screenshots

image
image1618×1216 112 KB

image
image1618×1216 114 KB

#2

I haven’t worked much w/ resolution adjustments, but I’ve seen others just use scripts to adjust sizes properly for different resolutions.

local v1 = UDim2.fromScale(0, 0.238)
local v2 = UDim2.fromScale(-0.133, 0.238)
if UserInputService.TouchEnabled then
	Frame.Size = UDim2.fromScale(0.179, 0.731)
	Frame.Position = UDim2.fromScale(-0.185, 0.5)
	v1 = UDim2.fromScale(-0.18, 0.082)
	v2 = UDim2.fromScale(0, 0.082)
	ListLayout.Padding = UDim.new(0, 4)
end

Here is an example from some code I stole, it’s just a quick “if statement” at the bottom of the local script checking if it’s a touch device and then you can resize the different UI elements using that code. Hope this wasn’t too vague.

1 Like
#3

But this doesn’t happen with the thing above it. Theres a one frame at the very top with the X and “Store” title, then there’s another frame under it with the 2 large buttons in it. I’m not sure why the bottom frame moves but the top one doesn’t.

#4

The positions change on the UI’s because the resolutions on phones are smaller than resolutions on computers. A phone is something like 1792 × 828 while PC monitors usually have a 1920 × 1080.

Assuming your store button opens the bottom frame, here is an example of what you wanna do.

local UIposition = Vector3.new(3,3,3) -- position variable


StoreButton.MouseButton1Click:Connect(function() -- button opens "store UI"
	
	TweenService:Create(StoreFrame, TweenInfo.new(.5), {Position = UIposition}) -- Tweens to position variable
	
end)


if game:GetService("UserInputService").TouchEnabled then -- checks if it's a phone/tablet
	
	UIposition = Vector3.new(2,2,2) -- changes position variable if it is a phone/tablet.
	
end
1 Like
#5