GUI appears oddly on other devices

I have a gui that is for a shop. the gamepass picture is round, and and distortion to it makes it look extremally buggy. I am already using scale for position/size, so I am not sure what to do. I have tried using a UI Aspect ratio constraint, but that does not fix it either. here are some picture’s.

desired look

look on mobile (without UIAspectRatioConstraint)


as you can see, the ImageLabel is extremally distorted.

look on mobile (with UIAspectRatioConstraint only in the ImageLabel)


the ImageLabel is forced to become smaller to compensate and keep the same shape.

look on mobile (with a UIAspectRatioConstraint in all of the children of the ScreenGui, that is all 6 of the panels and the backgrounds panel.)


not even sure what is happening here.

the only solution I have found is parenting everything under the back panel, and then adding a UIAspectRatioConstraint to the back panel; however, even that produces unwanted results.

if you look at the below picture, you can see how much padding I want in-between the edge of the screen and the GUI. you can see the output, it shows you my screen size.

now here is what the above method does on mobile, as you can see, it does not distort anything, however, there is a large undesirable gap at the bottom of the screen.


my question is, how can I make this GUI look pretty on all devices? it does not have to be the same size, just as long as it has roughly the same feel and no padding/sizing issues I am cool with it. how can I achieve this goal?

I am honestly not too sure, but you could try making gui for different devices, so it’ll look nice?

Instead of adding numbers on the red side, Do it on the green side one


This will lock the gui on the currently size you wanted it to be

Edit : wait nvm, i just found out that i’m wrong on this :skull:

the problem is that this would be extremally tedious as there are hundreds of devices, plus there is 0 ways of detecting what device a player is on through a script.

yeah, thats the only problem with that
i wish roblox would implement a feature which makes it easier for making gui for all devices

I think the main devices are mainly Computers, Phones, Tablets, and Xbox, but there are ways to detect the device that the player is using but the methods are a tad bit hacky to use

yes, but the IPhone XR has a vastly different display compared to a IPhone 4. so just to cover phones, I would have to cover ALL the IPhone models, ALL the samsung models, and ALL the pixel models.

I recommended this plugin:

That is what I used to make the GUI. I already tried UIAspectRatioConstraint in it, and both the position/size of the GUI use scale.

2 Likes

did you ever figure out how to do this, specifically for iphone xr and those models as theyre different from the older models

Sadly no. My shop UI still looks horrible.

yeah I see this only happens with certain models such as the iphone xr, iphone 14, etc. Looks ok with others and I tried the ui constraint plugin with no update, ill update you if I find a solution

1 Like

Will this help?