Ik wil dat mijn website formaat wordt aangepast naar een mobiel formaat.

PHP Code:

    @media only screen and (max-width: 1024px) {
}
deze bovenstaande inhoud is aangepast voor ipad formaat.
maar als ik dan nog eens onderstaande code gebruik voor een mobieltje werkt deze niet
            @media only screen and (max-width: 640px) {
} 


Het zou moeten werken, kun je de gehele CSS ergens copy/pasten? Goede kans dat er een foutje in zit (een accolade te veel of te weinig of zo).

Gebruik ook min-width. Maar in theorie moet het werken.

Code:

@media screen and (min-width: 641px) and (max-width: 1024px)  {

}
@media screen and (max-width: 640px)  {

}

Haal de min-width eens weg en maak hiervoor een eigen media screen.

bedankt voor de hulp.
Maar het werkt nog steeds niet

boven deze code staat mijn gewone web css en vanaf hier vraag ik de mobile website.
/* Media Queries */
@media screen and (min-width: 641px) {
.container > header{
text-align: center;
}
p.codrops-demos {
position: relative;
top: auto;
left: auto;
}
#sv {
display:none;
}
#left {
position:fixed;
width:264px;
background-color:#676056;
display:inline;
height:100%;
overflow:hidden;
}
#tekst {
position:absolute;
margin-left:264px;
width:700px;
padding:20px;
color:#676056;
background-color:#ebe4de;
display:inline;
min-height:96%;
}
#left li {
font-family:Arial, Helvetica, sans-serif;
height:20px;
width:200px;
text-align:right;
padding:10px;
margin-bottom:3px;
padding-right:30px;
color: #ECE5DF;
background-position:right;
}
#left li:hover {
font-family:Arial, Helvetica, sans-serif;
height:20px;
width:200px;
text-align:right;
padding:10px;
margin-bottom:3px;
padding-right:30px;
color: #676056;
background-image: url(../images/pijlover.png);
background-position:right;
}
.logo {
width:210px;
}
.logo {
width:210px;
}
#top {
display:none;
}
@media screen and (max-width: 140px) {
#left {
margin-left:-999px;
}
#tekst {
position:absolute;
padding:20px;
color:#676056;
background-color:#ebe4de;
min-height:100%;
width:100%;
float:left;
margin-left:0px;

}
#top {
background-color:#F00;
padding:10px;
width:100%;

}
}

Zet eens !important achter een element. Mocht het dan wel werken dan weet je dat je de verschillende media queries in de verkeerde volgorde hebt staan, waardoor het niet de juiste css overschrijft (overschrijft iPad querie bijv. Mobiele querie aangezien ze beide aan de max width van 640 px voldoen.).