Embedding App with Mobile View

App Building
,
1

Hi -

I have embedded my app in an HTML file using the following code. However, when I load the HTML page on a mobile device, it only loads the desktop version. How can I get it to properly format for mobile?

<html>
  <head>
    <title>Territory Records</title>
    <script src="https://cdn.tryretool.com/embed.js"> </script>    
  </head>
  <body>
    <div style="height: 100vh; width: 100vw;" id='container'></div>

    <script>
          
      var rt = window.retool.RetoolDashboard(document.getElementById('container'), "https://theleadingpractice.retool.com/embedded/public/[xxxxxxx]?_releaseVersion=latest");
      
    </script>
  </body>
</html>
2

Hey @finedesignz!

Is this happening across all mobile devices? At the moment, the breakpoint for the mobile view is a width of 600px.

image
image932×82 17.3 KB

Enabling a configurable view is something that's on our dev team's radar, at the moment we don't have an eta for when it's available but I can let you know here when it is!

This isn't exactly a solution but I'm curious what you see when you try something like this for your container:

<div style="height: 100vh; width: 100vw; max-width: 599px;" id='container'></div>
3

*** EDIT: Newbie mistake with my css. Your solution worked great! ***

Hi @kabirdas! Thanks for the response.

I tried your code, but I still get the full desktop width:

<html>
  <head>
    <title>Territory Records</title>
    <script src="https://cdn.tryretool.com/embed.js"> </script>  
    <style>
      .container {
        position: relative;
        overflow: hidden;
        width: 100vw; 
        height: 100vh;        
        max-width:599px;
      }
          </style>
  </head>
  <body>
    <div id='container'></div>

    <script>
          
      var rt = window.retool.RetoolDashboard(document.getElementById('container'), "[[[public URL]]]");
      
    </script>
  </body>
</html>

Should be #container, not .container... :zipper_mouth_face: