I’m having a responsive design issue with my upgrade system GUI that looks fine on PC but becomes unusable on mobile devices.
Current Setup:
- I have a ScrollingFrame containing 4 upgrade frames (FasterCooking, FasterMoving, FasterNPC, StorageUpgrade)
- Using UIListLayout with Padding set to {0.05, 0}
- Each frame represents a different upgrade option in my tycoon game
The Issue:
On mobile devices (especially phones), the upgrade frames stretch vertically way too much, making them look distorted and taking up excessive screen space. The frames become too tall and the content inside doesn’t scale properly.
What I Want to Achieve:
- Frames should maintain reasonable proportions across all devices (PC, tablet, phone)
- Content should be readable and properly sized on mobile
Image 1: How it currently looks on mobile (problematic)
Image 2: How it should look approximately (better proportions)