Embedded code doesn't fit in mobile version of my website

[Tanya_Rules]

Hi! I embedded some code from InVision – it’s an interactive prototype, but it doesn’t fin the screen in mobile version. How to fix it?

[dram (Alex Dram)]

Please provide your read-only link so that we can tell you how to fix this.

[Tanya_Rules]

What is read-only link?

Tatiana

[dram (Alex Dram)]

Share a read-only link | Webflow University

[Tanya_Rules]

Hope that’s what you’re asking for

https://preview.webflow.com/preview/tanyas-first-project-373b3b?utm_source=tanyas-first-project-373b3b&preview=e324adb9fc4815d01c91c0352314deb0

[dram (Alex Dram)]

Here is why the iframe doesn’t fit:

the iframe contains fixed sizes for the embed and to fit inside a certain width you will have to manually modify the width and height. You will need to establish a ratio of the screen, so first so go here - I already set up the current embed screen size. Now just click “lock” in the lower right corner and enter the width that would fit the minimum device width you want to support. The height will be automatically adjusted. Then just enter these new numbers inside the embed and save it.

[Tanya_Rules]

I decreased the size and that’s what happened:

it didn’t proportionally reduce it, but cropped.

[dram (Alex Dram)]

I apologies, it was late yesterday and I derped on this one. Of course it was just a size of a frame not prototype itself! You will still need to adjust the frame though so it is still something that you will need to do.

The second step is to reduce the size of the prototype itself. You can add transform property to the inline styles of the iframe to make the prototype itself smaller. Here is the code that you can use as a start:

<iframe style="transform: scale(0.5)" width="438" height="930" src="//invis.io/AXR1KKSDPRQ" frameborder="0" allowfullscreen></iframe>

Notice the scale modifier. You can set it to anything between 1 and 0 where 1 is it’s original size and 0 - it is being small to the point of invisibility. Hope this helps.

[Tanya_Rules]

But can it proportionally get decreased when changing devices? When I used this code, this happened:

and it looks really small on the desktop size.

[dram (Alex Dram)]

OK. let’s fix this.

First, remove the transform property form the iframe, we will put it elsewhere.

Now the cut sides can be fixed by setting you styles on the embed (furniture html) on mobile breakpoint to flex direction: vertical, align: center and wrap children set to don't wrap. Like so

Now to make the prototype small only on mobile create an embed element somewhere on the page and put this code inside it:

<style>


@media screen and (max-width: 479px) { 
.html-furniture{
transform: scale(0.5); 
}
}

</style>