Forum di Matriz
rendere pagina responsive - Versione stampabile

+- Forum di Matriz (https://www.matriz.it/forum)
+-- Forum: Programmazione Web (https://www.matriz.it/forum/forum-26.html)
+--- Forum: (X)HTML, CSS & JavaScript (https://www.matriz.it/forum/forum-28.html)
+--- Discussione: rendere pagina responsive (/thread-691.html)

rendere pagina responsive - Chandler - 12/12/2014

Ciao Mattia,
avrei bisogno di rendere QUESTA pagina responsive, per la precisione avrei bisogno che:
1) lo sfondo si ridimensioni in funzione della risoluzione (probabilmente utilizzando le media query)
2) il testo su tre righe finisca centrato, allineato sotto al logo sul marmo
3) il footer vada in basso, ma resti 10px più in alto rispetto al bordo inferiore dello sfondo come nell'immagine che ti allego.

Fammi sapere please

Grazie
Chand

RE: rendere pagina responsive - Mattia - 13/12/2014

1) Assegna lo sfondo al body e aggiungi la proprietà background-size con valore cover.

2) Per centrare orizzontalmente e verticalmente un elemento (in questo caso section), devi assegnargli una larghezza e un'altezza fissa:
Codice:
section {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -70px 0 0 -150px;
    width: 300px;
    height: 150px;
}
I valori di larghezza e altezza che ho messo potrebbero non essere precisi e, se li devi cambiare, devi modificare anche i margini (il margine dall'alto deve essere il valore negativo della metà dell'altezza e quello da sinistra deve essere il valore negativo della metà della larghezza).

3) Per mettere il footer in basso, puoi assegnargli una posizione assoluta con bottom uguale a 0 e il margine dal basso uguale a 10 pixel. Prova anche a mettere direttamente il valore bottom uguale a 10 pixel e vedi quale la versione che funziona meglio.

RE: rendere pagina responsive - Chandler - 13/12/2014

Perfetto, adesso funziona perfettamente! Ovviamente ho dovuto cambiare i valori di [i]section/i] ma ho ottenuto il risultato desiderato.

Grazie mille