Hey, I recently made this UI that covers the whole screen. When I am in the Average Laptop emulator it covers the whole screen, but when I test it the UI seems to move down and left some. I do have constraints in my UI from using the plugin UI Tools.
I am aware that there is another topic about this same issue, but I couldn’t find the answer in it.
Average Laptop Emulator(Before testing):
Testing with Emulator:
Explorer Window:
Any thoughts on why this might happen?
You are using UIAspectRatioConstraint which keeps the same aspect ratio no matter the size of the screen, you can just not use it on the background and it should fix the issue, but to make sure contents of it stay in their place you should change contents AnchorPoint’s.
I propound we discuss the two shifts separately.
It happens because of the so called screen inset, which keeps all UI elements in a safe and user accessible area. That means away from the default Roblox top bar and any device shapes that interfere into the screen. Hopefully the image below elucidates this better. Safe area is the largest rectange on the screen minus the top bar.
(Source: ScreenGui | Documentation - Roblox Creator Hub)
This can be turned off with IgnoreGuiInset property of the screen gui. Ideally you’d have anything users interact with inside the safe area and the stretched images outside (such as your blue background and the darker blue line). That would most likely require a separate screen gui.
realmile is right, UIAspectRatioConstraint prevents the adjustment to different screen ratios. Aside from that, I see you’ve set background size on Y-axis to 1.113. It’s better to not guess the sizes because of the wide variety of screens (after all, someone could be playing on a 10-foot user interface - Wikipedia).
Anchor points, Size constrants (a property), size using scale from 0 to 1, and position using scale from 0 to 1 are sufficient for most cases.
in the ScreenGui tick the IgnoreGuiInset
As @blve_hxrizon said, you could select the ‘IgnoreGuiInset’ option.
The GuiInset is the gap that you are seeing from the top of your screen to the UI itself. Disabling it will set the UI all the way to the top.
In this case you should be good, but be careful when setting that option when your UI’s are close to the default roblox buttons, such as the escape-key menu.
Thanks everyone who replied, I took all of your advice and it worked! 
I set IgnoreGuiInset to true and took away the UiAspectRatioConstraint and it worked perfectly! I think I will give MeerkatSpirit the solution because he explained in-depth why it all worked, thanks again though!
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
