Web App Mobile View of Page Broken

💬 App Building
1

My web app has all components set to display on mobile. When I view the webapp page from a mobile device without "desktop site" enabled in the browser, half the content is cut off as shown in attached image. There is no ability to scroll or move the screen unless I toggle on desktop site and just view the desktop version of the webapp. Any ideal why this could be happening?

image
image960×2142 130 KB

3

Hi @Joshua_B,

Looks like a bug, what browser and what device is this on?

4

Google chrome and any mobile device. Also microsoft edge too. I imagine it is all of them

5
  1. Check mobile layout in Retool editor

  • In the editor, switch to mobile preview (phone icon).

  • Make sure all components fit inside the mobile canvas and are not positioned far to the right or outside the visible grid.

  • Avoid very wide containers; stack components vertically.

  1. Remove or adjust fixed heights

  • Check containers / modules / list views for fixed height styles.

  • If any container has a fixed height and “overflow: hidden”, the page will not scroll.

  • Use “auto height” if possible, or allow vertical scroll inside the container.

  1. Avoid custom CSS that disables scroll

  • If you added custom CSS, look for rules like:

    • overflow: hidden on body, html, or main containers

    • position: fixed full-screen wrappers

  • Remove or relax those rules so the page can scroll on mobile.

1 Like