[Risolto] Container Footer come il body

[ilmagowalter]

Ciao,
ho ridefinito nel mio personal.css il footer in questa maniera

Codice: [Seleziona]

footer{
    background: #FFFFFF;
    margin-top: 20px;
    width: 940px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.15);
}
in modo tale che abbia lo stesso aspetto del container principale ed è ok
mi sono accorto però che restringendo la finestra del browser, mentre il body si restringe, la dimensione del footer rimane la stessa

credo che debba definire altre classi nel css tipo

Codice: [Seleziona]

@media (max-width: 768px) {
    footer {
        width: 768px;
    }
@media (max-width: 480px) {
    footer {
        width: 480px;
    }
ma non ottengo nulla, come vanno definite queste classi ?

[adottauncane]

Ciao,
non dimentichi semplicemente di chiudere la prima parentesi graffa?

Codice: [Seleziona]

@media (max-width: 768px) {
    footer {
        width: 768px;
    }
}


[ilmagowalter]

nel css c'era la chiusura, qui nel post ho dimenticato a metterla..

[adottauncane]

Un link al sito?

[ilmagowalter]

il sito ce l'ho in locale, però ti posso postare un paio di prove mentre trovo un hosting gratuito

[ilmagowalter]

@adottauncane

ecco il link provvisorio
http://ecopm.altervista.org/ilbrivido/

[ilmagowalter]

ciao, qualcuno ha avuto modo di vedere il link al sito ?
ho fatto altre prove ed inserendo

Codice: [Seleziona]

@media (max-width: 767px) and (max-width: 480px) {
    footer {
        width: auto;
    }
}
sono riuscito a visualizzarlo bene sullo smartphone, però sul tablet con orientamento verticale no
quali solo le varie max-width da utilizzare ? quali utilizza il template protostar ?

[ilmagowalter]

ok, penso di essere riuscito così...non so se è la maniera migliore ma per il momento visualizzato su 4 dispositivi diversi in maniera corretta
se qualcuno ritiene che c'è un metodo migliore ( sicuramente ci sarà, o quanto meno ci saranno delle regole generali per i vari dispositivi ) sarebbe interessante parlarne qui

Codice: [Seleziona]

footer{
    background: #FFFFFF;
    margin-top: 20px;
    max-width: 960px;
    width: 940px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.15);
}
@media (max-width: 480px) {
    footer {
        width: auto;
    }
}
@media (max-width: 767px) {
    footer {
        width: auto;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    footer {
        width: 680px;
    }
    .container  {
        width: 680px;
    }
}