logo mobile

[mariarosaria]

Salve a tutti.

Se visitato il sito di cui mi occupo e restringete gradualmente la finestra del browser, noterete che ho un logo un po'... "ballerino".
Dove sta il problema?
E' un problema di position? Di padding? Di "non responsività"?
Grazie

[marine]

ehmm, cof cof, emmh, scusa l'ignoranza, ma qual'è il tuo sito?

[mariarosaria]

Hai ragione...
Il sito é questo pfsi.it
Ma comunque lo vedi sotto il mio avatar... 

[giusebos]

non noto nessun effetto "don lurio"

[tonicopi]

Ciao Maria Rosaria, anch'io vedo il logo perfettamente ad ogni risoluzione.

[mariarosaria]

Nooo... State scherzando vero?


In allegato alcuni printscreen su vari dispositivi da cui ho provato:
Sia quando il logo era per esteso (Piccoli Fratelli e Sorelle dell'Immacolata)
Sia dopo averlo rimpicciolito (Piccoli Fratelli sfondo bianco) per provare se il problema era dato da una questione di "misura" (o meglio, di lunghezza)

[giusebos]

browser usato?

[mariarosaria]

Sia chrome che firefox 

[giusebos]

che dirti, con firefox non noto niente di strano.....magari le tue versione dei browser sono datate oppure semplicemente il computer....

[mariarosaria]

Beh, comunque mi pare molto strano...
Browser aggiornati, ho provato dal cellulare mio, da quello di altri...
Mah... 
Quindi mi confermate che rimpicciolendo la finestra sta sempre centrato sia in verticale che in orizzontale e rimane all'interno della barra blu?

[giusebos]

Si, c'è solo un punto dove sparisce del tutto.
prova ad usare una estensione per firefox che si chiama "Web Developer", troverai una funzione che ti permette di visualizzare il sito nei vari formati di monitor, dopo che li avrai configurati.

Questa estensione inoltre ti permetterà di agire direttamente sulle media query in maniera chirurgica.

[Limma]

Quindi mi confermate che rimpicciolendo la finestra sta sempre centrato sia in verticale che in orizzontale e rimane all'interno della barra blu?

No, con uno smartphone in posizione "orizzontale" il logo non viene visualizzato nella barra blu, ma compare scrollando la pagina, e compare sulla destra appena sotto la barra del menu.
Ho provato con vari smartphone e diversi browser mobili.
Stesso risultato anche con la "modalità di visualizzazione flessibile" di Firefox e con gli equivalenti tool di Chrome.

[mariarosaria]

Ecco, infatti é proprio questo che intendevo.
Utilizzo già questi strumenti, ma ho fatto diverse prove e non capisco dove devo andare ad intervenire...

[mariarosaria]

Piccoli progressi...
Ho aggiunto a questo codice già esistente:

Codice: [Seleziona]

/* Only phones */
@media (max-width: 767px) {
  .tm-navbar {
    margin: 0 -25px 25px -25px;
    border-width: 0 0 1px 0;       
  }
La voce:

Codice: [Seleziona]

display: contents;
Adesso fino a 360 pixel ci siamo.
Da 359 px in giù, prima scatta verso il basso e poi si rimpicciolisce, ma in maniera eccessiva.

Si riesce a farlo rimpicciolire, ma in maniera graduale (e senza quel noiosissimo scatto verso il basso?)

Un'altra cosa... come faccio a "staccare" i due elementi (menu lineette e logo) in modo che il menu rimanga fisso a sinistra e il logo sia centrato?
Ci sono riuscita soltanto una volta durante la varie prove online, ma poi ho aggionato la pagina e non riuscivo più a capire cosa avevo fatto!