My Menu Glitched Out Slightly on all devices and needs adjusting for all devices

I am trying to make a menu for my game and it did not work out so well… Here are snapshots (Laptop/PC) In Roblox Studio Without testing:

With Testing in studio:

(The Circle is the gap)

Playing it in Game:

Picture 1: I adjusted everything. The size is 1,0,1,0 I scaled everything in place.

Picture 2: When I test it in the studio some things are a bit glitched/Not in the right postion but for some reason their is a mini gap but I put the size to 1,0,1,0 which should be full screen.

Picture 3: When Playing the game the Menu looks Horrible! Everything is not in the right position.

I need help on making my Menu in the right postion without all the GUI’S being moved around and not glitching out. If people could help out how to make all the GUI’s and images in the right postions like on Picture 1.

Hiee! Don’t know if this will completely help, but it’s worth a shot I guess. There’s a plugin I use all of the time whenever I make GUI-related things for my games, it’s called ‘AutoScale Lite’.

Link to plugin → Click

Should look like this when you open up Studio:
image

Here’s how I use it (should work for you too):

Compacted for organisation :)

Step 1: Click on the blue icon with the up and down arrows.

Step 2: Click on the part(s) of the menu/gui/etc.
image

  • make sure to not exclude any parts relating to the GUI (text, buttons, images, etc.). However, I am pretty sure that you can only ‘convert’ one element at a time.

Step 3: Click on ‘scale’ in both categories of this little pop-up thing.
image

Step 4: Repeat for every part of the GUI/etc.
image

  • Red ‘cross-out’ means that it doesn’t need to be converted, or that it cannot be converted.
  • Blue ‘underline’ means that it must be converted (make sure to go into every button, etc. and make sure you haven’t missed anything!)

Side note/reminder: Pretty sure that you can only ‘convert’ one element (button, screen-GUI, image-label, etc.) at a time! Also, make sure that you don’t exclude any elements that need to be converted.

Also, if this is of any assistance to you, you can test the look of your GUIs (or whatever they’re called haha) by clicking on this icon in the top right corner of Studio:
image

And then changing the device type to different devices, such as a phone or an Xbox.

Hopefully, this helps!

(If I’m accidentally spreading false/unhelpful information, please let me know, and I’ll delete my comment. <3)

1 Like

try going into its screengui and see for property called IgnoreGuiInset and make it true