Weird UIGridLayout issue!

I am trying to get a frame to scale to different screen sizes. I already changed the size to be scale instead of offset. I think the problem is the UIGridLayout is doing something weird with the positions of the items in the frame.

This is what my screen looks like in regular studio view:

This is how it looks on iphone X view:

1 Like

Everything looks good but I think the egg looks more like blobs.
I think some shading and lighting on the eggs could help!

Also The problem with the UI is that the screen si too tiny for the UI I think.

1 Like

Your Grid is probably organizing the Labels in Offset size,
Since mobile devices have obviously less resolution than Desktop,
you have to adjust it according to the % of the Frame,
You have 6 texts, so 100% (entire frame) divided by 6 is 16.66%

So you should try Size = {1,0,0.1666,0}

1 Like

It’s going to be really hard to keep the elements aligned properly, I recommend having the egg image label and the chance text label in the same frame, and then have all frames parented to another frame with a UIListLayout (UIGridLayouts are for when you need rows and columns )

File EggLayoutGui.rbxm (6.8 KB)
and a really useful plugin that helps with scaling GUIs [Plugin] AutoScale Lite for GUIs - Scale your UI

image
image

2 Likes