Differenza di visualizzazione sito tra Smartphone e PC

[RelaxGraphix]

Buongiorno,
Sono un nuovo iscritto, anche se il sito lo consulto da tempo ormai. Grazie agli Amministratori per avermi accettato e un saluto a tutti . Espongo subito il mio problema. Sto editando il tema Wordpress - "Business meeting" (Prodotto da Siteground). Nelle modifiche finora apportate non ho riscontrato grossi problemi se non uno di cui non riesco a venirne a capo: mettendo "position: fixed;" all' header, i vari <div> si adattano alla risoluzione degli smartphone, visualizzando il sito pari pari a come lo vedo su pc, ma così facendo l' header scrolla insieme alla pagina. E io vorrei che rimanesse fermo in alto. Se cambio la "position" in "position: absolute;" invece, l' header rimane fisso, ma sullo smartphone il navigation menu e il logo vengono visualizzati di dimensioni più piccole, lasciando vuoto parte del background. Posto delle informazioni in più per facilitare la comprensione del mio problema.

il sito su cui sto facendo l' editing del tema è: http://associazioneadel.com/sitoprova/

VersioneDesktopAdel.JPG

VersioneMobileAdel.jpg

se dovessero occorrere altre informazioni ditemi pure.

[Shores]

Provo a darti un aiuto rapido, ma se non hai studiato i posizionamenti CSS può esserti difficile capire...

position:fixed; significa che un dato elemento della pagina è posizionato in modo fissato, ovvero in una posizione fissa RISPETTO ALLA VIEWPORT, ovvero rispetto al bordo interno della finestra del browser, e quindi NON si sposterà quando si effettua lo scroll dei contenuti della pagina.

position:absolute; invece è più complicato, perchè significa che l'elemento verrà mantenuto ad una distanza fissa DA UN ALTRO ELEMENTO, ovvero dal primo suo progenitore che non ha position:static; (il posizionamento di default); nota bene che questo significa che si comporterà in modi diversi a seconda del tipo di posizionamento del suo progenitore.

Per esempio, se il suo progenitore è fixed, allora il suo progenitore starà fermo allo scrolling, e quindi anche lui starà fermo allo scrolling, se il suo progenitore ha un altro tipo di position (quindi absolute o relative), allora si sposterà allo scroll proprio come il suo progenitore, mantenendo da esso le distanze che gli hai assegnato.

[RelaxGraphix]

Ciao Shores, grazie dell' aiuto e del tempo prima di tutto. Comprendo perfettamente quello che stai tentando di spiegarmi, quello che non riesco a comprendere è come mai al mio comando "position: fixed" l' header scrolla con la pagina, quando non dovrebbe essere così. il primo problema è questo...

[Shores]

Nel link che hai postati il fixed lo hai dato al solo #firstmenu ... e in effetti quello sta fermo!

[RelaxGraphix]

Buongiorno e scusa il ritardo nella risposta...hai ragione il firstmenu sta fermo in alto, ma scrolla con la pagina, a differenza del logo e del nav menu che rimangono fissi. Sono le dimensioni che vedo sul telefono del logo e del nav menu che risultano differenti, non riempiono tutto il monitor che invece va a riempirsi mettendo il "position: fixed" a tutto. Con quest' ultima modifica ottengo quello che voglio (ovvero avere la risoluzione perfetta anche sul smartphone) ma mi scrolla tutto l' header, io invece voglio avere la risoluzione perfetta facendo rimanere il logo e il nav menu fisso in alto. Spero di essermi spiegato bene