Responsive website works on Chrome but not on Firefox - css

Question

This is my first time building a responsive website and so far so good. But the problem right now is that it's working fine on google chrome (tested on phone and toggle device mode) but not on Firefox.
If you open this in device mode you can see what I mean (Firefox).
Anyone know what the problem is?
I don't think the html code is necessary and the css code. Cause I think the problem lies in the first row code, but just in case I put the css code up.
EDIT: in 320 x 480 pixels
CSS:
#media only screen and (min-width: 320px) and (orientation:portrait){ /*Mobiel portrait modus*/
html, body
{
margin: 0;
font-family: arial;
height: 100%;
}
.link
{
color: inherit;
text-decoration: none;
}
.top
{
position: fixed;
z-index:9999;
background: #80c217; /* Old browsers */
background: -moz-linear-gradient(top, #80c217 0%, #80c217 37%, #80c217 40%, #a1d54f 66%, #7cbc0a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#80c217), color-stop(37%,#80c217), color-stop(40%,#80c217), color-stop(66%,#a1d54f), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #80c217 0%,#80c217 37%,#80c217 40%,#a1d54f 66%,#7cbc0a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #80c217 0%,#80c217 37%,#80c217 40%,#a1d54f 66%,#7cbc0a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #80c217 0%,#80c217 37%,#80c217 40%,#a1d54f 66%,#7cbc0a 100%); /* IE10+ */
background: linear-gradient(to bottom, #80c217 0%,#80c217 37%,#80c217 40%,#a1d54f 66%,#7cbc0a 100%); /* W3C */
width: 100%;
height: 200px;
}
h1, h2
{
display: inline;
}
.menu
{
width: 70px;
float:right;
margin-right: -220px;
}
h1
{
font-size: 30px;
}
h2
{
font-size: 18px;
}
.logo
{
float:right;
width: 150px;
padding-top: 75px;
padding-right: 75px;
}
.title
{
float:left;
padding-left: 75px;
padding-top: 75px;
}
.navbar
{
margin-top: 199px;
position: fixed;
background-color: black;
color:white;
width: 100%;
height: 250px;
padding-top: 5px;
padding-bottom: 15px;
overflow:hidden;
z-index: 200;
}
.nav
{
list-style-type: none;
margin-left: -40px;
margin-top: -4px;
}
.nav li
{
padding-top: 5px;
font-size: 40px;
text-align: center;
border-top:1px solid white;
}
.nav li:last-child
{
border-bottom:1px solid white;
}
.head2
{
font-size: 40px;
}
.links
{
text-align: left;
list-style-type:none;
padding-left: 50px;
padding-right: 50px;
}
.middle
{
text-align:center;
padding-top: 200px;
position:relative;
background-color: #ccd3c3;
width: 100%;
height: 950px;
font-size: 30px;
overflow: hidden;
padding-bottom: 50px;
}
.middlemachtiging
{
text-align:center;
padding-top: 200px;
position:relative;
background-color: #ccd3c3;
width: 100%;
height: 710px;
font-size: 30px;
overflow: hidden;
padding-bottom: 50px;
}
.middleprijzen
{
text-align:center;
padding-top: 200px;
position:relative;
background-color: #ccd3c3;
width: 100%;
height: 1150px;
font-size: 30px;
overflow: hidden;
padding-bottom: 50px;
}
.text
{
text-align: left;
padding-left: 50px;
padding-right: 50px;
}
.auto
{
width: 100%;
overflow: hidden;
}
footer
{
overflow: hidden;
background: #9ffe62;
color:black;
width:100%;
height:150px;
position: relative;
text-align: center;
}
footer p
{
padding-top: 45px;
}
}
.pricetable
{
font-size: 30px;
}