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?