Figma prototype embed mobile view - where's the prototype device frame?

Hello!

I've embedded my Figma prototype and am unsure how to get the device frame to display in the mobile view on my actual device. It's visible when viewing the mobile view on a desktop only.

Also, the height of the mobile frame is clipped on my device. 

Does anyone have any suggestions? 

Webpage: https://www.danielleborisoff.com/iframe-test

Embed code:

<div style="padding-bottom:100%; position:relative; display:block; width: 100%">
  <iframe width="100%" height="100%"
    src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FGyvp3zqubzq4tP1yw1nqFD%2FCapstone-Marketing-Site%3Fpage-id%3D57%253A6251%26type%3Ddesign%26node-id%3D57-6259%26viewport%3D793%252C496%252C0.13%26t%3D4refmqMFGP2NTcAR-1%26scaling%3Dscale-down%26hotspot-hints%3D0%26mode%3Ddesign"
    frameborder="" allowfullscreen style="position:absolute; top:0; left: 0">
  </iframe>
</div>

You need to share the site and the code you're using.

It's possibly to do with the iframe but without sufficient information we can't really help buddy.

50 minutes ago, DDallavalle said:

Hello!

I've embedded my Figma prototype and am unsure how to get the device frame to display in the mobile view on my actual device. It's visible when viewing the mobile view on a desktop only.

Also, the height of the mobile frame is clipped on my device. 

Does anyone have any suggestions? 

Webpage: https://www.danielleborisoff.com/iframe-test

Embed code:

<div style="padding-bottom:100%; position:relative; display:block; width: 100%">
  <iframe width="100%" height="100%"
    src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FGyvp3zqubzq4tP1yw1nqFD%2FCapstone-Marketing-Site%3Fpage-id%3D57%253A6251%26type%3Ddesign%26node-id%3D57-6259%26viewport%3D793%252C496%252C0.13%26t%3D4refmqMFGP2NTcAR-1%26scaling%3Dscale-down%26hotspot-hints%3D0%26mode%3Ddesign"
    frameborder="" allowfullscreen style="position:absolute; top:0; left: 0">
  </iframe>
</div>

 

I've added the embed code, my bad. Thanks for your response!

Hmm.. You're kinda limited with iframes.

You could do something along the lines of trying

@media (max-width: 768px) {
  blockid iframe {
    height: 200%; /*experiment with values over 100%*/
  }
}

Using your blockid. Or even overriding the 100% in the iframe but honestly I'm thinking you're a bit limited .

22 hours ago, KwameAndCo said:

Hmm.. You're kinda limited with iframes.

You could do something along the lines of trying

@media (max-width: 768px) {
  blockid iframe {
    height: 200%; /*experiment with values over 100%*/
  }
}

Using your blockid. Or even overriding the 100% in the iframe but honestly I'm thinking you're a bit limited .

Anything I add code-wise seems to break the page now...I may need to use a different solution.

Thanks for your help! @KwameAndCo

14 hours ago, DDallavalle said:

Anything I add code-wise seems to break the page now...I may need to use a different solution.

 

Can you explain how it's breaking?

I think you're honestly limited by Figma

On 9/30/2023 at 4:55 AM, KwameAndCo said:

Can you explain how it's breaking?

I think you're honestly limited by Figma

I get a 'Can't open this page' message on mobile Chrome and Safari.

Can you keep above code? We can check easier