How do I resize an embedded mobile prototype?

Background

When you embed a mobile prototype, we generate some HTML that you can use to place an interactive version of your prototype on your website. That HTML uses an iframe to show the mobile prototype, and the size of that iframe is automatically determined by the type of mobile device (e.g. iPhone 6 Plus vs. iPhone 5s vs. iPad) in InVision.

We sometimes get asked how to resize an embedded prototype. Though there’s currently no way to resize the embedded prototype when generating the embed code within InVision, you can tweak the size of the embedded prototype using CSS to style the iframe.

Caution: If you’re not comfortable with CSS and HTML, you may find customizing the embed code to be difficult. We’d encourage that you only try this method if you’re comfortable with CSS and HTML.

Changing the size of your embedded prototype using CSS

To tweak the size of your embedded prototype, you can do the following:

1. Generate the embed code like you normally would. The HTML looks similar to this: