Why is embedded app forced to mobile view rather than desktop?

💬 External Apps
1

Hi!

I'm building a form that I plan to embed on a website. For some reason it seems to always render in mobile rather than desktop view regardless of the viewport.

Demo

html with embed code below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Embedded Form</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            background: white;
        }
        .iframe-container {
            height: 100%;
            width: 100%;
            background: white;
        }
        iframe {
            width: 100%;
            height: calc(100% + 80px);
            border: none;
            transform: translateY(-57px);
            margin-bottom: -57px;
        }
    </style>
</head>
<body>
    <div class="iframe-container">
        <iframe src="https://whatsgood.retool.com/embedded/public/ae5dee7a-6520-43dc-bb12-9940b61f873c/page1" frameborder="0"></iframe>
    </div>
</body>
</html>
3

Hi @Drowe003,

Thank you so much for the detailed video! That helps a ton for us to troubleshoot.

The main question I have is, when you are seeing form being condensed to the narrow width at 35 seconds, is that from your live desktop app running with Retool Embed being the only thing that webpage is rendering?

I am curious why this is occurring since when you click the play button to preview from the Retool app, it is sized appropriately :thinking:

I am wondering if somehow in that skeleton app there is some CSS rule that is either keeping the embed frame from expanding its width. Or someone communicating to Retool that the embed frame should size for mobile(when it shouldn't) but we would need to look at it in the inspector to confirm there's nothing preventing Retool from sizing correctly or telling it the wrong size.

We can help to live debug during our office hours on Zoom at this link! We have them every Tuesday and Thursday 11am-noon PST.

4

Hi @Drowe003,

Just wanted to circle back on this issue and see if you are still experiencing this or have details on steps for me to reproduce to see if this bug is consistently appearing.