I am currently working on designing a mobile responsive layout in Retool and I have encountered some issues. While the components appear correctly on desktop screens, nothing is displayed when viewing the page on a smartphone-sized screen.
I would like to create a mobile version of the UI for a web page using Retool, not Retool mobile app (native app).
Could you please provide guidance on how to achieve a responsive design in Retool specifically for smartphones? I would appreciate any instructions, best practices, or examples you can share.
Hey @takkme ! There's actually a really simple fix. Your components won't show up unless you manually check the Show on Mobile option in the inspector. The way to do it is to scroll all the way down to Appearance, then click on the settings button and you'll see that option (See screenshot)
You just need to make sure to do that for any component you want to show up on your mobile layout. Or if you're looking for a more native option, you can try to use Retool Mobile.
Oh, I did not know about that feature!
I was able to successfully display the component in the mobile ratio.
However, now the screen is broken.
Is there any way to apply different options for component placement, etc. when I set the mobile ratio? Or should I create another App for mobile and separate the links?
@takkme If you just want a web version of whatever app you're using I wouldn't create separate apps because that would just make maintaining those apps super time-consuming for you. The only time I would create a separate app is if you're using Retool Mobile in which case you have to create a separate app (See this: Retool Mobile)
To answer your question, when you're in the mobile view, any changes that you make to the layout of your app and size of your components will apply independently from your desktop view. So you can move around components and change their sizes without worrying about messing up your normal desktop layout.
