How to make an app appear on mobile

[mascaritas]

1. My goal:
   I'd like to have a simple way to make sure, all components of an app are also shown on mobile web version
2. Issue:
   I see a lot of hidden toggles on appearance
3. Steps I've taken to troubleshoot:
   I tried to switch them all on
4. Additional info:
   It does not show some random elements at mthe mobile even though all are switched on

[WidleStudioLLP]

Hello @mascaritas ,

To ensure that all components appear on the mobile web version of your Retool app, follow these steps:

1. For each component you want visible on mobile, use the Inspector in the right panel. Click on the Appearance section and enable the Show on mobile toggle for each

2. If multiple components are in the same position on the mobile layout, the App IDE will notify you. Ensure that no other component is covering the one you want to display.

3. If components are still not showing, try repositioning them in the mobile layout.

Assemble mobile layouts for web apps | Retool Docs

[ChiEn]

Thanks @WidleStudioLLP, that’s right. Hey @mascaritas! If multiple components are in the same position on the mobile layout, the App IDE will notify you (see screenshot below) and nudge you to move them.
Go ahead and try the steps above, and let us know how it goes and if the “random elements” are showing up now?

[mascaritas]

Hello everyone and thanks a lot for the inputs. Let’s say I have 12 or 16 different elements. How can I make sure they all appear on the mobile view the selection process is quite unstable. I’m looking for a select all command and then I wanna hit the toggle.

[ChiEn]

Happy to help! @mascaritas Try selecting all your components in the canvas, then click the three little dots in the Appearance section and enable "Show on mobile."

[mascaritas]

Hello @ChiEn and thanks a lot for the illustration. I experienced some time that the selection is not reliable meaning that some elements get deselected or can’t be selected

which command or rectangle select could I use to reliably select all present components also if there are nested within each other? Could a JS snippet do the job for me?

[ChiEn]

@mascaritas, when your components get deselected or can’t be selected, do you see this warning in red (screenshot below)? If so, try rearranging your components and then test again. The warning is there to ensure no other component is covering the one you want to display on mobile.

[mascaritas]

Thanks a lot for the proposals and replies. I have made an app that is both mobile and web for browser on desktop

now when people open this on mobile, it’s a really tough experience. Sometimes it doesn’t even load. How can I make it Just responsive and work as expected.

Here is the example

https://loopi1.retool.com/p/outlet

[mascaritas]

The goal would be to make it load super quick and be super easy to handle

The interface still looks quite clunky and small and doesn’t expand to the screen size. I don’t know how to do it properly. Is there a good tutorial on it?

[mascaritas]

I think it has a extremely long loading time, can anybody propose a workaround or a root cause ?
People churn away when opening the app

[ChiEn]

Hey @mascaritas, sorry it’s been so frustrating for you! I tried accessing the link on my own iPhone (Safari and Chrome) and it wasn’t loading at all. Just to cover all bases, have you tried switching your Retool canvas into mobile mode? What do you see when you do that? If possible, could you share a screenshot?

[ChiEn]

Hey @mascaritas, just checking in to see how you are doing and whether you still need any help? Let me know!

[ChiEn]

Hello again @mascaritas, checking in to see if you had a chance to look at my suggestion above! How are things going on your end?

[mascaritas]

Hi Chin

Thank you for asking back! Actually, it's still a bit buggy. There are some loading time issues. Sometimes it works, sometimes it doesn't. When I switch to the mobile view in the Retool Editor, everything looks fine.

I was wondering if I could use the new app generator to re-lay out the whole app for me, and if this would make a difference. Can the Retool app assistant actually switch and make elements mobile-friendly as well?

[ChiEn]

Hey @mascaritas, good to hear from you! Great idea about using Assist. I checked in with the engineering team and unfortunately Assist does not support mobile view at the moment. It is definitely something they can look into improving though.

I have a few more clarifying questions about the issue you are seeing:

1. I do not think I have asked this yet. Are you on Retool Cloud or a self hosted version? If self hosted, which version are you on?
2. Which components are not showing up on mobile view?
3. It would be extremely helpful when I file this as a bug. Could you please include a Loom video of the behavior, or some screenshots from your mobile?

Thank you so much for helping us track this down!

[mascaritas]

Hi,

Thanks for getting back to me, and I'm looking to reproduce a shareable impression of the concerned application.

As for the bigger picture and how the App Assist could be helpful in this is by giving it access to toggle UI elements via appearance so they appear on the mobile view as well. This, when done by hand, is very cumbersome, and as of today, I don't know if it can be done programmatically by running a JS code snippet and switching cycling through all present UI elements and switching them on for the mobile view.

—> This would be a perfect job for the App Generation Assist. The AppAssist is very good in redesigning the UI and decluttering it, so I imagine it could do this in a breeze as well for the mobile view.

Best

[ChiEn]

Hey @mascaritas, I hear you. It would be amazing once Assist supports mobile view. I’ll definitely keep you updated when I have more info! Were you able to reproduce that app on your end? If so, can you share it with me so I can take a look and proceed with filing the report, thank you!

[Shrey]

1. Select each component in your app.

2. Go to the "Appearance" section in the right panel.

3. Enable the "Show on mobile" toggle for each component.

4. If you have many components:

   • Select multiple components by clicking and dragging, or hold Shift and click them.

   • In the right panel (Appearance), click the three dots (- - - ).

   • Click "Show on mobile"—this will enable it for all selected components at once.

5. Check your mobile layout:

   • Make sure no components overlap. If two things are in the same place, only one might show. Move things to new positions if needed.

     

[mascaritas]

Thanks a lot for your detailed description.

this is working for me when I do it manually

I wish the new App Assist could do this for me, or a JS script could cycle through all components and change their properties and nudge them around until no more collision

Who knows this capability might come very soon?

[ChiEn]

@mascaritas I agree. Stay tuned for any upcoming Assist updates! 📣 Retool Announcements - Retool Forum

We also have an AI Office Hours session coming up tomorrow at 9am PT. Bring your AI questions there!