Ok, ora è un po' più chiaro
Quella tecnica si chiama "adaptive web design" (AWD) e si usava fino a qualche decennio fa fino a quando non è nata la necessità di trovare un nuovo metodo più ottimale per poter rendere fruibili gli stessi contenuti su diversi dispositivi; la tendenza è andata quindi verso il "responsive web design" (RWD).Originariamente inviata da ivanisevic82
In alcuni particolari contesti potrebbe risultare più appropriato l'uso di AWD ma non penso sia questo il caso.
Ci sono vari motivi per cui, ad oggi, la scelta ricade quasi esclusivamente su RWD.
Non mi dilungo su questo argomento ma puoi fare delle ricerche. Al capitolo 3 dei link utili CSS, sotto la voce "RWD vs. AWD", puoi anche trovare vari link ad articoli sull'argomento.
Lascia perdere il position relative, lascialo come era. Direi che si possa risolvere in altro modo e forse in maniera più semplice (sempre che non saltino fuori altri effetti collaterali).
Mettiamo però dei paletti. Io do per scontato che quel <h1>, anche portandosi su più righe, non superi le 3 righe. Questo perché altrimenti andrebbe comunque a sbordare oltre il limite basso dell'header stesso su cui è sovrapposto.
Ora, se il problema è l'altezza variabile di <h1> che fa "spostare" i contenuti a seguire, perché allora non fissare questa altezza?
Tieni conto che puoi fissarla giusto per la media-query interessata cosi da limitare eventuali altri effetti collaterali.
Da quel che ho provato puoi quindi applicare height:131px sotto questa media-query esistente:
Hai già una regola con varie proprietà, tra cui quel margin-top negativo. Puoi quindi inserire lì l'applicazione di height col valore fisso.codice:@media (max-width: 899px) { .testo_header_subpage { /* ... altre proprietà */ height: 131px; } }
Il valore 131px è rilevato per quell'elemento in quella particolare situazione; valore dato dall'altezza di una singola riga (46px) più il padding-bottom di 85px.
In quella regola hai infatti un padding-bottom che puoi comunque rimuovere, dal momento che questo ora sarà incluso nel valore stesso dell'altezza (per la questione del box-sizing:border-box).
Fai qualche prova, vedi se funziona e se non saltano fuori altre magagne dopo la modifica.
Fai sapere
Rispondi quotando
