显示iFrame时出现问题

Question

我在主机上托管了一个支持PHP的表单，我想在桌面和手机中显示它，它在桌面上是完美的，但在手机上根本不显示，我可以改变什么？

HTML + CSS：

<iframe src="http://daniell.epizy.com/" scrolling="no" frameBorder="0">Browser not compatible.</iframe>

iframe {
    height:350px;
    width: 100%;
}

来自PHP主机的HTML + CSS：

<form id="contact" method="POST" action="index.php">
  <div class="test">
    <input type="text" name="name" placeholder="Naam" /><br />
    <input  type="email" name="email" placeholder="E-mail" /><br />
    <textarea type="text" name="message" placeholder="Bericht"></textarea><br />
    <div class="message">Bericht verzonden</div>
    <button id="submit" type="submit">
      VERSTUUR
    </button>
  </div>
</form>

html,body {
margin:0!important;
}

.test {
max-width:600px;
text-align:center;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
background-color:#fff;
margin:0 auto;
}

input {
margin-bottom:10px;
}

textarea {
height:100px;
margin-bottom:10px;
}

input:first-of-type {
margin-top:35px;
}

input,textarea {
font-size:1em;
border:1px solid #cecece;
background:#d7d7d7;
color:#000;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-moz-background-clip:padding;
-webkit-background-clip:padding-box;
background-clip:padding-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:80%;
max-width:600px;
padding:15px 10px 10px;
}

::-webkit-input-placeholder {
color:#000;
opacity:0.5;
}

button {
margin-top:15px;
margin-bottom:25px;
background-color:#025669;
-ms-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
border:1px solid #2ABCA7;
-webkit-transition:.5s;
transition:.5s;
display:inline-block;
cursor:pointer;
width:30%;
color:#fff;
padding:12px 45px;
}

button:hover,.button:hover {
background:#026b83;
}

label.error {
font-family:Brandon;
font-size:1em;
display:block;
padding-top:10px;
padding-bottom:10px;
background-color:#d89c9c;
width:80%;
color:#ece0c8;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
margin:auto;
}

@font-face {
font-family:Brandon;
src:url(Brandon.otf);
}

.message {
font-family:'Source Sans Pro',arial,sans-serif;
font-size:1.1em;
display:none;
padding-top:10px;
padding-bottom:10px;
background-color:#2ABCA7;
width:80%;
color:#ece0c8;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
margin:auto;
}

:-moz-placeholder,::-moz-placeholder,:-ms-input-placeholder {
color:#000;
}

@media max-width 700px{
body {
padding-top:10px;
}

label.error,input,textarea,button {
width:90%;
}
}

我的问题是：如何使用以下媒体查询显示此iFrame？

@media only screen and (max-width: 480px) {