Joomla.it Forum

Joomla! 3 => Joomla! 3 => : ilmagowalter 10 Mar 2016, 12:06:41

: [Risolto] Container Footer come il body
: ilmagowalter 10 Mar 2016, 12:06:41

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

:

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

:

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

: Re:Container Footer come il body
: adottauncane 10 Mar 2016, 13:52:10

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

:

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


: Re:Container Footer come il body
: ilmagowalter 10 Mar 2016, 14:18:08

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

: Re:Container Footer come il body
: adottauncane 10 Mar 2016, 14:25:13

Un link al sito?

: Re:Container Footer come il body
: ilmagowalter 10 Mar 2016, 15:41:39

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

: Re:Container Footer come il body
: ilmagowalter 12 Mar 2016, 16:31:18

@adottauncane

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

: Re:Container Footer come il body
: ilmagowalter 15 Mar 2016, 10:54:22

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

:

@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 ?

: Re:Container Footer come il body
: ilmagowalter 15 Mar 2016, 11:43:14

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

:

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;
    }
}