Streaming live at 10am (PST)

How to Replicate Webflow Showcase?

Hello all,

Would anyone happen to have the iframe code required to replicate the website previews that are on the Webflow Showcase, please?

I am currently using the code below in my WIP site, but would like the “miniature desktop” view such as that on the Showcase, rather than the iframe content defaulting to mobile view using the code below.

Many thanks!

Before anyone asks, the reason that i’ve not included the share link is I am constantly mucking around with it right now. This is why I’ve kept the question as generic as possible - anyone viewing it might see completely the wrong thing!

<style>
.iframe-holder 
{
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
}
.iframe-holder iframe 
{
height: 100%;
width: 100%;
}

</style>

<div class="iframe-holder"><iframe src="https://westendtap.webflow.io/" seamless frameborder="0"></iframe></div>
<iframe sandbox="allow-scripts allow-same-origin" src="url-link" class="iframe"></iframe>


<style>
iframe {
    width: 100%;
    height: 100%;
    border-width: 2px;
    border-style: inset;
    border-color: initial;
    border-image: initial;
    border: 0;
    transform-origin: 0 0;
    background-color: white;
    border: none;
}

* {
    box-sizing: border-box;
}
   
</style>

Let me know if this works for you :slight_smile:

Noah, really appreciate you taking the time to look into this for me.

Not having any joy at the moment. It’s still sizing in accordance with the iframe’s breakpoint - I want it to be 400-500px in width so it’s automatically showing the mobile view of the website within the iframe.

To make it easier to explain myself I’ve thrown a test page on (It’s the page titled “IFRAME TEST”), share link is here: https://preview.webflow.com/preview/jolly-good-web?utm_medium=preview_link&utm_source=designer&utm_content=jolly-good-web&preview=8c64f260781dc19b0c7fde3cfe02eb8a&mode=preview&fbclid=IwAR3j3dNlbnI8jfYKAoLpvGyinrtvh1sNx0fPkNpI9lH6VZAjyouKkTmJwV4

I’m hoping to replicate the website preview available on the project showcase page. Specifically, this one: https://webflow.com/website/ldaa

Really appreciate any assistance you can give!

I’m just bumping this in case anyone else has a solution :slight_smile: