Conditionally styling components for mobile view in Web app

💬 App Building
,
1
  1. My goal: To have components be conditionally styled to cater for mobile view in a retool web app (i.e. reduce text component font-size in mobile view)
  2. Issue: Outside of layout / position changes, any styling changes made to a component in the mobile view affect the desktop view
  3. Steps I've taken to troubleshoot: Unable to find any inherent retool settings that would enable this, and documentation and online discussions suggest there aren't any. I have attempted to use the usual media queries in the custom css but to no avail. Also inline html / markdown in individual text components hasn't worked either. Looking at the elements in the browser developer tools, I haven't been able to find any attribute that could be used to determine screen size of the viewer. The only solution that seems to be available based on discussions is duplicating all components and showing / hiding one set for mobile and one for desktop... but this carries an increased risk of errors with any and all future component changes having to be implemented for duplicate components
  4. Additional info: (Cloud or Self-hosted, Screenshots) Cloud

NOTE: I am currently experimenting with using a ternary with Viewport.width attribute in the text component's font size attribute, would be keen to get anyone else's advice or input on this approach in case there are any caveats!

2

Hi @mandyc, I took a run at this and found some success using container queries.

Here is an example of some custom css to change a text component font size and background color:

.retool-grid {
  container-type: size;
  container-name: screen;
}

 @container screen (width < 600px){
  [data-testid="RetoolGrid:text1"] p {
    background-color: lightblue;
    font-size: xx-small;
  }
}

I'm checking what the size of the retool grid (the canvas) is and specifically only changing the font size of a component named "text1" when the canvas is less than 600px. You will probably have to play around with this as I found there were still some inconsistencies between web and mobile browsers (ex: [data-testid="text1"] worked on the browser but not on mobile).

Let me know if this helps!

1 Like
3

Thanks @Mike_M - I'll have a play with this! I'm actually still struggling a fair bit in general with the process of enabling mobile on my web app. It seems quite glitchy - I'm finding quite often trying to click 'appear on mobile' throws an error of the spacing being blocked by another component.. no matter how much I move things around in the desktop view. The overall experience trying to do this is that I'm doing it blind, and I can't actually see why it's being blocked (the component being referred to is well out of the way on desk top view). Additionally, trying to copy a component, then add it manually in the mobile view below a component is also not pasting anything in.. At this stage my only option seems to be to just build out new replica components for the remainder of my page but this page has a form with conditional logic and styling already set up so it is a lot of extra work.
Does this sound like usual behaviour with this feature? Or possibly I'm not working with this feature the way it was meant to be used?

4

Are you getting an error for every component?

I tried converting a few pages on my own personal test app to work on mobile, and I did run into the intersecting error occasionally when two components were touching. However, it was inconsistent for me since sometimes it didn't seem to care, and when I moved the offending component away it did work for me.

I have heard of others more broadly having issues with mobile view, so it's not completely unusual, but I'm not sure if they are the same problems you're having now. If you can send a screenshot or DM me the app json I could repro the issue you're having so that I can either find a way to fix it or make a bug report if necessary. I don't think you should have to recreate every component for the mobile view.