How to make an iframe take up the whole portion of the screen

Question

I would like to remove the padding on weebly of a single page so that a custom html element will display on the entire screen instead of having white edges. Link to the website

If this isn't possible then how could I change the background of just that page?

Please show some code to show what you have attempted so far. — Jonathan Lam, Aug 06 '16 at 00:02

score 0 · Answer 1 · answered Aug 06 '16 at 01:36

/* 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 src=""http://imcrafty.buycraft.net" width="100%" height="1050" frameborder="0" style="border:0"></iframe>
</div>

score 0 · Answer 2 · answered Aug 06 '16 at 17:36

I messed around with the html and found a solution, Go to theme > Edit Html/Css > open main_style.css > Change

#content {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 4.5em 2em;
    background: #ffffff;
  box-sizing: border-box;
  overflow: hidden;
}

to

#content {
  width: 100%;
  max-width: 1640px;
  margin: 0 auto;
  padding: 4.5em 2em;
    background: #ffffff;
  box-sizing: border-box;
  overflow: hidden;
}

How to make an iframe take up the whole portion of the screen

2 Answers2