Making Invision iFrame embedded code mobile responsive

[kspkspksp]

So I added my Invision prototype to my online portfolio, and it looks great! But it's not mobile responsive, and half of the app gets cut off and you have to scroll to see all of it on mobile, which isn't ideal. Here's the site - https://www.polozoffdesign.com/

I've tried several ways to make the iframe mobile responsive, including the instructions posted here - https://community.weebly.com/t5/App-Center/Embedding-a-Responsive-Google-Map/td-p/684

However, when I add the CSS into the theme (OR SEO settings), the bottom half of the app gets completely cut off on both applications, and you can't go through the prototype.

I've looked at several websites and I'm still at a lost. Changing the width to 100% doesn't work, I messed with the padding-bottom size several times, etc. Any advice is greatly appreciated.

[Adam7]

I did a quick Google search and found this:

https://support.invisionapp.com/hc/en-us/articles/205204185-How-do-I-resize-an-embedded-mobile-proto...

I'm not sure if you've tried that yet, but it's worth giving that method a shot.

[kspkspksp]

Yes, I did try that as well. I even messed with different ways to transform it from here - https://developer.mozilla.org/en-US/docs/Web/CSS/transform#scale

2 problems

1- The desktop version shrinks the prototype and leaves a TON of negative space, and there's no way to adjust it so it fits in the section nicer

2- The mobile view is still cropped off

Here are screenshots:

[Adam7]

Something like this might work:

<style>
	@media and screen (max-width:768px)
	{
		.invisionprototype-responsive
		{
			width: 300px;
			height: 500px;
		}
		
		.invisionprototype-responsive > iframe
		{
			style="transform: scale(0.5)";
			position: relative;
			top: -200px;
			left: -20%;
		}
	}
</style>

[kspkspksp]

That almost worked.. It does look more responsive, but it still doesn't resize on the mobile platform. I tried changing the max pixel width as well but that didn't seem to help.

I will keep playing with it. I work with a bunch of developers, so maybe one of them has time to help me.

[Adam7]

I'm sure there's a way to get it working. If one of the developers gives you a solution which works feel free to post that here if you have a chance.

[kspkspksp]

So, instead of trying to embed the interactive prototype itself, I made a gif out of it. I was able to get an embed code from here - https://iframely.com/

The mobile version does quite well. Now I have a new issue, which is that the desktop version doesn't position to the center. If I center it on the desktop version, it stays to the left. Looks fine on mobile either way. If I try to use a spacer to center it, it seems to slide off the right side of the screen in mobile.

So, now I'm trying to figure out how to get it to center on both desktop AND mobile. Here's the actual code I used:

<div style="max-width: 362px;"><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 205.2545%;"><iframe src="//cdn.iframe.ly/x37To2O" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen></iframe></div></div>

Mobile Version - 

Desktop Version - center distributed on desktop.

[Adam7]

One solution would be to add the Hide app to the page, put your spacer in that and set it to only display on desktop.

https://www.weebly.com/app-center/hide

[kspkspksp]

Awesome!! That worked perfectly, thank you!