UI Scaling problem for other devices

Help and Feedback Art Design Support
, , , ,
#1

Hi, I recently started designing UI’s so I made my first shop UI

The Problem is that it’s size won’t change at all for the other devices

RobloxScreenShot20210407_005631737
RobloxScreenShot20210407_0056317371536×801 565 KB

Here’s the UI, it look’s fine there but for the other devices like a mobile phone it just looks like a giant shop UI that doesn’t even fit the screen of it.

image_2021-04-07_013243
image_2021-04-07_0132431920×1080 331 KB

This is how it look’s like from a phone.

I used the UIAspectRatio plugin but that didn’t seem to fix it, I also played around with other stuff like UIScale or UIPadding but it didn’t work.

Since I started UI Designing today I’m not an expert about this stuff.

Note: I suck at scripting so any solution including scripting won’t work for me.

#2

Can you show the size?

I need to see the size in order to help you.

Yes.

#3

the size of the main frame? (limited character yes)

#4

the size of the main frame is exactly {0, 580},{0, 518}

#5

The problem is you’re using offset.

Use scale instead.

image

Select the main frame, then press this and convert both the position and size to scale. Do the same with the descendants.

There’s more GUI items that will help you fit to size, but it’s complicated for me to explain.

Search up XX and YY Size Constraints and see if those can help you if you want more advanced sizing.

#6

That Worked for the main frame, but for the small frames with the image label and stuff it messes it up. It also messes up when I use it for the ScrollingFrame

#7

Use the unit conversion on all the frames.

#8

You could put your game non-phone to not get this problem.

#9

I did, still messes it up, I put the Unit Conversion on every element.

#10

I’m not working on a game, I’m learning how to get better at UI and it’s scaling so I can get experience and work for others, maybe their game will also be for mobile so that’s why.

#11

Can you send a picture? And if you want maybe a file to reproduce it.

#12

I’ll send a picture

image_2021-04-07_024053
image_2021-04-07_0240531920×1080 614 KB

This is how it looks like when I use Unit Conversion on everything.

#13

That a problem with the scrolling frame. There’s a thing called LayoutUtil that helps with that. LayoutUtil: Automatically sizes a ScrollingFrame's UIGridLayout/UIListLayout. If you don’t want to use that then you just have to change the size of the frames manually. Not ideal but the scrolling frame isn’t that great, so its what you have to deal with unfortunately.

1 Like
#14

Thanks! I looked at the plugin and it looks useful, I’ll download it but I’m too tired right now to use it though it’s literally 3AM, I made a replica of the UI and deleted the ScrollingFrame and did changes then used the Unit Conversion, so the problem was on the ScrollingFrame, when ever I scale something that is the child of the ScrollingFrame it just messes it up, so the ScrollingFrame is pretty weird in general. Thanks in advance, it took me 3 hours to figure it out but it was worth it.

1 Like