External form breaks website on mobile

Question

Having issues with my site on mobile where if any element is larger than the page width it causes the footer to jut out of the side.

See attached screenshot in bottom left corner, website link.

Because of the budget of this project I need to use form provider they have selected.

Is there a way to make my site bulletproof, so even if there are a few oversized elements it doesn't break the page?

http://codepen.io/Dingerzat/pen/QGbWKK

/* CSS */

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline; }

body {
  line-height: 1; }

h1, h2, h3, h4, h5, h6 {
  clear: both;
  font-weight: normal; }

ol, ul {
  list-style: none; }

blockquote {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

del {
  text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0; }

a img {
  border: none; }

/* =Scss Variables
-------------------------------------------------------------- */
/* =Global
-------------------------------------------------------------- */
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body {
  background-color: #3cb5f9;
  color: #505050;
  font-family: "Ubuntu", sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8; }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  line-height: 1;
  font-weight: 300; }

a {
  text-decoration: none;
  color: #3cb5f9; }

a:hover {
  color: #0793e2; }

/* =Template
-------------------------------------------------------------- */
#wrapper {
  width: 100%;
  margin: 0 auto; }

#main {
  background-color: #ffffff;
  padding-top: 150px; }

.container {
  width: 80%;
  margin: 0 auto;
  padding: 0 30px; }

.containertwo {
  width: 86%;
  margin: 0 auto;
  padding: 0 30px; }
.containertwo h3 {
  font-size: 30px;
  text-align: center;
}

section {
  padding: 60px 0; }
  section h1 {
    font-weight: 700;
    margin-bottom: 10px; }
  section p {
    margin-bottom: 30px; }
    section p:last-child {
      margin-bottom: 0; }
  section.color {
    background-color: #d51c84;
    color: white; }

/* =Info Bar
-------------------------------------------------------------- */
#info-bar {
  background-color: #000000; }
  #info-bar a {
    color: white;
    font-size: 14px;
    text-transform: uppercase;
    display: inline-block;
    margin: 0;
    padding: 10px; }
    #info-bar a:hover {
      background-color: #0793e2; }
  #info-bar span.all-tutorials,
  #info-bar span.back-to-tutorial {
    display: block;
    width: 50%; }
  #info-bar span.all-tutorials {
    float: left;
    text-align: left; }
  #info-bar span.back-to-tutorial {
    float: right;
    text-align: right; }

/* =Header
-------------------------------------------------------------- */
#logo img {height: 40%;}

header {
  width: 100%;
  height: 150px;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: #000000;
  -webkit-transition: height 0.3s;
  -moz-transition: height 0.3s;
  -ms-transition: height 0.3s;
  -o-transition: height 0.3s;
  transition: height 0.3s; }
  header h1#logo {
    display: inline-block;
    height: 150px;
    line-height: 150px;
    float: left;
    font-family: "Oswald", sans-serif;
    font-size: 60px;
    color: white;
    font-weight: 400;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; }
  header nav {
    display: inline-block;
    float: right; }
    header nav a {
      line-height: 150px;
      margin-left: 20px;
      color: #ffffff;
      font-weight: 700;
      font-size: 18px;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s; }
      header nav a:hover {
        color: white; }
  header.smaller {
    height: 75px; }
    header.smaller h1#logo {
      width: 150px;
      height: 75px;
      line-height: 75px;
      font-size: 30px; }
    header.smaller nav a {
      line-height: 75px; }

/* =Footer
-------------------------------------------------------------- */


*, *:before, *:after{
  box-sizing: border-box;
  color: #242424;
  padding: 20; margin: 30;
}

html, body{background: rgb(0, 0, 0);}

.content{
  margin: auto;
  margin-bottom: 350px; /* Same height as footer */
}

.fixed_footer{
  width: 100%;
  height: 350px;
  background: #000000;
  position: fixed; left: 0; bottom: 0;
  z-index: -100;
  padding:100px 5px;
}
   .fixed_footer p{
    color: #696969;
    column-count: 2;
    column-gap: 50px;
    font-size: 1em;
    font-weight: 300;
}
/* =Extras
-------------------------------------------------------------- */
.clearfix:after {
  visibility: hidden;
  display: block;
  content: "";
  clear: both;
  height: 0; }

/* =Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 660px) {
  /* =Header
  -------------------------------------------------------------- */
  header h1#logo {
    display: block;
    float: none;
    margin: 0 auto;
    height: 100px;
    line-height: 100px;
    text-align: center; }
  header nav {
    display: block;
    float: none;
    height: 50px;
    text-align: center;
    margin: 0 auto; }
    header nav a {
      line-height: 50px;
      margin: 0 10px; }
  header.smaller {
    height: 75px; }
    header.smaller h1#logo {
      height: 40px;
      line-height: 40px;
      font-size: 30px; }
    header.smaller nav {
      height: 35px; }
      header.smaller nav a {
        line-height: 35px; } }
@media all and (max-width: 600px) {
  .container {
    width: 100%; }

  #info-bar a {
    display: block; }
  #info-bar span.all-tutorials,
  #info-bar span.back-to-tutorial {
    width: 100%; }
  #info-bar span.all-tutorials,
  #info-bar span.back-to-tutorial {
    float: none;
    text-align: center; }
  #info-bar span.all-tutorials {
    border-bottom: solid 1px #0793e2; } }

html,
body {
  margin: 0;
  height: 100%;
}

section {
  position: relative;
  height: 100%;
  background-attachment: fixed;
  background-size: cover !important;
  background-position: center;
  background-blend-mode: screen;
  /* &:nth-of-type(1) */
}
section h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  color: #fff;
  width: 100%;
  text-align: center;
}
section:nth-of-type(1) {
  /* .paralax-1 */
}
section:nth-of-type(1) .paralax-1 {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  /* .new-paralax */
}
section:nth-of-type(1) .paralax-1 .new-paralax {
  z-index: -100000;
  transform: translateZ(-8000px) scale(0.4);
  background-attachment: fixed;
  background-size: cover !important;
  background-position: center;
  background-blend-mode: screen;
  height: 100%;
  width: 100%;
  position: relative;
  transform: scale(1.3);
  background-color: #ffffff;
  background-image: url("https://visualhunt.com/photos/xl/2/aerial-view-of-coffee-cup-on-wooden-table.jpg");
}
section:nth-of-type(2) {
  height: 20em;
  background-image: url("http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/iStock_000068237701_Full-edited.jpg");
}
section:nth-of-type(3) {
  background-color: white;
}
section:nth-of-type(4) {
  background-image: url("https://visualhunt.com/photos/xl/2/sport-gymnastics-frog-funny-fitness-fit-sporty-1.jpg");
}
section:nth-of-type(5) {
  background-color: white;
}
.collapse {
  background-color: rgba(255,255,255,0);
  border-bottom: 1px solid #eee;
  cursor: pointer;
  color: #fff;
  padding: 10px;
  margin:0px;
  max-height:40px;
  overflow:hidden;
  transition: all 0.4s;
}
.collapse * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

}
.collapse.active {
   background-color: rgba(255,255,255,0.9);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
  z-index: 200;
  color:#444;
  max-height:3000px;
  padding:10px 20px;
  margin: 10px -10px;
  transition: all 0.2s,max-height 4.8s;
}
.collapse h2 {
  font-size: 18px;
  line-height: 20px;
  position:relative
}
.transparent{
  background-color: rgba(255,255,255,0) !important;
  color:#fff !important;
  box-shadow:none !important;
  margin:0px !important;
  padding:10px !important
}
.collapse h2::after{
  content: "+";
  text-align:center;
  position:absolute;
  width:15px;
  height:15px;
  border:1px solid #ccc;
  border-radius:50%;
  font-size:12px;
  line-height:15px;
  opacity:0.5;
  right:0;
  top:0;
}
.collapse:hover h2::after{
  opacity:1
}

.collapse.active h2::after{
  content: "-";
}

Answer 1

In html5 iframe can not have a width defined in %, it must be in pixels. You can try setting it with js:

<iframe onload="window.parent.scrollTo(0,0); this.width=screen.width;" src="" allowtransparency="true" name="62852942445361" id="62852942445361" style="border: none; height: 1030px;" scrolling="no"></iframe>

Or css:

#iframeParent{
    height:1030px;
    position: relative;
}

#iframeParent iframe{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

<div id="iframeParent">
    <iframe onload="window.parent.scrollTo(0,0)" src="" allowtransparency="true" name="62852942445361" id="62852942445361" style="border: none; height: 1030px;" scrolling="no"></iframe>
</div>

Answer 2

No universal solutions, better fix any bugs individually

I do so:

safari debuger for mobile: https://www.screenmailer.com/v/BafnHC2miFNspVA

Result: https://yadi.sk/d/iGBuCgLv38SDXj