モバイルで外部フォームが中断する

Question

モバイルでサイトに問題がある場合、ページの幅より大きな要素があれば、フッターが外側にはみ出してしまいます。

左下のwebsite linkのスクリーンショットを参照してください。ので、私は、彼らが選択したフォームのプロバイダを使用する必要があり、このプロジェクトの予算の

。

私のサイトを防弾にする方法はありますか？そのため、いくつかの大きすぎる要素があっても、ページが壊れることはありませんか？

/* 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

ませユニバーサルソリューション

http://codepen.io/Dingerzat/pen/QGbWKK、より良いバグを修正し、個別に

私はそう：

サファリdebugerをモバイル：https://www.screenmailer.com/v/BafnHC2miFNspVA

結果：https://yadi.sk/d/iGBuCgLv38SDXj