Assemble mobile layouts for web apps

App Building
1

Goal:

I'm working on adapting a desktop layout to fit mobile screens. My goal is to customize the mobile view without impacting the desktop view. Based on a Retool Mobile Layouts guide: https://docs.retool.com/apps/guides/mobile-layouts, I expected changes to one layout not to affect the other, but any adjustments I make on mobile are being reflected on the desktop view and vice versa. Is there a way to customize these views independently?

Steps:

  1. I've set up a desktop layout that works well.
  2. When I switch to mobile view to adjust components for mobile, any changes I make (e.g., resizing or moving components) are also applied to the desktop layout.
  3. As a workaround, I've found that I when I drop new components into the mobile view and style them separately, it doesn't impact the desktop view, but this feels inefficient.
  4. Here’s a quick video showing the problem: https://www.loom.com/share/3eb48003361b4edcb75af16b8d4d2aff?sid=b929e057-b3f4-4cee-918c-5e6a5d4a36b4.
2

Hey @Nick_Renaud

Thanks for the detailed information!

So, any changes made to a component's settings will be applied to both displays. As a result, this looks like intended behaviour. As you said, a workaround is to drop new components to the mobile view. Alternatively, you could also create a module, if you know the same components may be reused.

I have also submitted a feature request on your behalf, to toggle on independent component settings, should you so wish to.

3

Thank you for clarifying and putting in the feature request Sarasey; I appreciate it!

1 Like