How To make a iframe website responsive

Design help General
1

i have no clue how to do this… anybody do?

2 
    /* Flexible iFrame */

.Flexible-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<!-- Responsive iFrame -->
<div class="Flexible-container">
    <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ch/maps?f=q&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=Bern&amp;aq=&amp;sll=46.813187,8.22421&amp;sspn=3.379772,8.453979&amp;ie=UTF8&amp;hq=&amp;hnear=Bern&amp;t=m&amp;z=12&amp;ll=46.947922,7.444608&amp;output=embed&amp;iwloc=near"></iframe>
</div>

i used this before and it seemed to work… see if it works

this is where i got the info

3

how would i go about implementing this in webflow?

4

Hi @artistro08-

I didn’t try out the code itself to see how it works, but here’s a quick tip about how you can implement something like this in Webflow:

Add the style tags to the CSS piece, then an Embed element into your site with all of the code:

<style>

.Flexible-container {
     position: relative;
     padding-bottom: 56.25%;
     padding-top: 30px;
     height: 0;
     overflow: hidden;
}

.Flexible-container iframe,   
.Flexible-container object,  
.Flexible-container embed {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

</style>

<div class="Flexible-container">

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.ch/maps?f=q&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=Bern&amp;aq=&amp;sll=46.813187,8.22421&amp;sspn=3.379772,8.453979&amp;ie=UTF8&amp;hq=&amp;hnear=Bern&amp;t=m&amp;z=12&amp;ll=46.947922,7.444608&amp;output=embed&amp;iwloc=near"></iframe>

</div>

Of course, with your own iframe src inside.

I hope that helps!

1 Like
5

Alright! so i got this going and so far its good! now all i need to know is how to get the site to fully expand height wise. any one know how to do that?

6

that is good that the iframe working. what do you mean for the site to expand fully height wise. can you be bit more clear or show some example of what you want to be a 100% height?

1 Like
7

i want the website to expand height wise based on whats inside the iframe.

1 Like
8

This topic was automatically closed after 10 days. New replies are no longer allowed.