Mobilna wersja strony

[MEXXIO]

Chciałem was zapytać bo mam pewien problem z dostosowaniem strony do wersji mobilnej w css mam coś takiego:

Kod:

@media only screen and (max-width : 320px) {
#box {
     padding-top: 200px;
}
#box h1 {
     font-size: 2em;
}
}
@media only screen and (min-width : 321px) {
#box {
     padding-top: 100px;
}
#box h1 {
     font-size: 3em;
}
}

jak mam:

Kod:

min-width : 321px

to zmienia również padding z pozycji przeglądarki na PC główne ustawienie:

Kod:

#box {
     border-top: 6px solid #61D296;
     padding-top: 320px;
}
#box h1 {
     color: #bdc3c7;
     text-transform: uppercase;
     text-shadow: 3px 3px rgb(57, 82, 107);
     font-size: 5em;
}

nie reaguję, a nie wiem właśnie co zrobić bo jeszcze nie bawiłem się z tym. Adres strony to:

Kod:

http://mexxio.pl/

[Kartofelek]

No ale przecież min-width:321 dziala zarowno dla 321 jak i 1600 więc o co chodzi? Powinieneś dać jakieś ograniczenie max-width