Beste Leden,

Ik heb een Media rule aangemaakt:

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

.footer {
height: 150px;

}
}

Wat wil ik bereiken? Ik heb een website en als ik deze verklein wil ik graag dat de div footer van 50px veranderd naar 150px.

Ik dit moment krijg ik met mijn code geen enkel resultaat, iemand een idee?

Dit zou normaal moeten werken.

Heb je in je head-tags volgende code vermeld?:

Code:

<meta name="viewport" content="width=device-width" />

Indien je werkt met IE6-8 gaat dit inderdaad niet werken omdat dit niet ondersteunt wordt. Een mogelijke optie om dit toch te laten werken is het gebruik van een polyfill (https://github.com/scottjehl/Respond).

Ik heb die code niet in de HEAD vermeldt (Ga ik er nu inzetten). Ik heb het getest met Firefox 23.0.1., chrome en IE8. Helaas zero resultaat.

Heb je de media query vermeld achter alle andere styling?

Code:

.footer {
    background-color: red;
    height: 50px;
}


@media only screen and (max-width: 960px) {
    .footer {
        height: 150px;
    }
}

Hier de volledige code:

Code:

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

#footer .footer {
height: 150px;

    }
}

Code:

#footer {
    position: relative;
    text-align: center;
}

#footer .footer {
    height: 75px;
    padding: 10px 0px 0px;
    background: #ffe10a;
}

#footer .footer a {
    padding-left: 10px;

}

Wordt de @media code voor of achter de "gewone" css code geplaatst?

U kan altijd eens een URL doorsturen in een privé bericht met de locatie waar de HTML & CSS geüpload zijn, zodat ik eens kan kijken naar het totale plaatje. Want bovenstaande code (indien in juiste volgorde geplaatst) moet probleemloos werken.

Wat Raf denk ik bedoelt is: staat de media query (dus je eerste blokje) wel NA je andere styling. Anders dan wordt deze weer 'overruled' door je 'normale' styling.

Edit: ok, topic te lang in tab open laten staan, er is al geantwoord ;)

Dit is het begin van mijn CSS-file vanaf regel-1

Code:

/*-------------------------------------------------------------------
DEFAULTS
-------------------------------------------------------------------*/

body, html {
    height: 100%;
}

form, fieldset, table, tr, td, img, blockquote, pre, p, h1, h2, h3, h4, h5 {
    border: 0; 
    padding: 0; 
    margin: 0; 
    border-collapse: collapse; 
    vertical-align: top;
}

@media only screen and (max-device-width: 480px) {
    html {
        -webkit-text-size-adjust: none;
    }
}

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

#footer .footer {
height: 150px;

    }
}

Je moet de media queries pas NA ALLE ANDERE CSS zetten. Dus je hebt eerst ALLE CSS voor een normale computermonitor, en daarna pas de media queries voor kleinere apparaten.

Ik zeg nu overigens niets anders dan de mensen voor mij maar blijkbaar is het nog niet helemaal doorgedrongen ;-)

Je hebt je media query nu bovenaan in je stylesheet staan. Alle CSS die hierna nog komt "overschrijft" de instellingen die je bovenin gemaakt hebt (dus die van je media query).

Daarnaast: begin altijd met de media query voor het grootste scherm, daarna pas die voor de kleinere schermen. Dus eerst de 960px, daarna pas de 480px.