CODEWITHSUNDEEP
htmlcssmedia-queries
Chris Frank
Chris Frank

Reputation: 4462

Media Queries acting funny in Chrome/Safari

I am working on a responsive website and I ran into a problem with the form. I have a outer container that hold the form and the submit button. When the user's browser reaches 524px or smaller the submit button will move below the outer container. Everything works fine in Firefox but when I'm using Safari/Chrome the submit button will not move back into the outer container.

I have an example of the problem here: yourl.co

Here is my HTML:

<div id="content">
<div id="formContent">
<form id="forms">
    <input id="email" type="email" class="text" placeholder="[email protected]" name="user[email]"/>
    <input id="submit" type="button" class="text" name="user[submit]" value="Notify Me!"/>
</form>
</div>
</div>

And here is my CSS:

#content{
width:100%;
max-width:573px;
height:auto;
margin:45px auto 0 auto;
}
#formContent{
width:99%;
height:56px;
margin:40px auto 0 auto;
background-color:#f6f5f5;
}
#forms{
border:none;
height:51px;
}
#forms #email{
width:75.1%;
height:51px;
border:none;
margin-top:2px;
background-color:#f6f5f5;
margin-left:6px;
}
#forms #email[type="email"]{
font-family:ubuntu-light;
font-weight:100;
font-size:1.875em;
color:#7baec6;
}
#forms #email[type="email"]:focus{
color:#498cab;
outline:none;
}
#forms #submit{
width:21.5%;
height:47px;
float:right;
margin-right:6px;
margin-top:5px;
border:1px solid #0e5779;
cursor:pointer;
}
@media only screen and (max-width: 524px){
#formContent{
    width:95%;
    max-width:524px;
    margin:40px auto 73px auto;
}
#forms #email{
    width:95%;
    border:none;
    margin-top:2px;
    background-color:#f6f5f5;
    margin-left:6px;
}
#forms #submit{
    width:125px;
    margin:12px auto 0 auto;
    float:none;
    display:block;
}
}

If you need anymore information I will be glad to provide it. Thanks for your help!

Upvotes: 2

Views: 253

Answers (1)

Ilya Pukhalski
Ilya Pukhalski

Reputation: 103

If you'll add css float: left; to #forms #email everything will be fine.

You can test it here: http://jsfiddle.net/witchfinderx/qwnXT/1/

Upvotes: 1

Related Questions