[RISOLTO] Problema con rotazione dispositivi ipad/iphone

[Uliano]

Ho un problema con l'immagine di sfondo della home page del mio sito.
Occupa tutto lo sfondo e all'apertura su qualsiasi dispositivo viene visualizzata correttamente.
Il problema si ha se successivamente ruoto dispositivi tipo ipad o iphone (non ho provato su altri tablet): l'immagine viene schiacciata in larghezza e mantenuta così anche se ruoto nuovamente il dispositivo...


Il template.css è:
#jf-slideshow {   
   background-clip: border-box;   
   background-color: #00446D;   
   background-image: url(../images/banner.jpg);   
   background-origin: padding-box;   
   background-position: center center;   
   background-repeat: no-repeat;   
   background-size: cover;   
   -webkit-background-size: cover;   
   -moz-background-size: cover;   
   -o-background-size: cover;   
   background-attachment: local;   
   position: relative;   
   z-index:50;
}


Qualcuno mi può aiutare?

[ellezero]

ciao Uliano, per favore metti un link al sito?
ciao e grazie

[Uliano]

www.fabioulianograsselli.com

[ellezero]

dunque, rispetto all'originale dello slide tu hai questa regola

background-size: 100% 100%;

proprio come regola dell'elemento slide. Nell'originale non c'e', non e' che l'hai inserita da qualche parte?

scusa se te lo chiedo ma perche usi uno slide se hai bisogno di un immagine di sfondo? magari mi son persa qualcosa

[Uliano]

Ciao Ellezero,grazie della risposta! ;-)
Cosa intendi con "rispetto all'originale"?
Cmq. non ho inserito nulla, l'unica modifica che ho fatto è stata mettere:
 
-webkit-background-size: cover;    [/size]   -moz-background-size: cover;       -o-background-size: cover


nel template.css.
In realtà è tutto già presente nel template ed io non ho fatto altro che cambiare l'immagine banner.jpg ed inserire le righe sopra in #jf-slideshow.


Lo slideshow penso che sia previsto al posto del banner nel template proprio per dare la possibilità di fare uno slideshow (cosa che in effetti una volta risolto il problema della rotazione mi piacerebbe fare con 3/4 immagini).


Hai qualche consiglio da darmi?

[ellezero]

si ok allora,

Cmq. non ho inserito nulla, l'unica modifica che ho fatto è stata mettere:
 
-webkit-background-size: cover;       -moz-background-size: cover;       -o-background-size: cover

tutta sta roba qui da codice appare sovrascritta dalla regola  (background-size:100% 100%) che ti dicevo prima.
Prova ad ovviare cosi (da firebug funziona) inserisci nel tuo #jf-slideshow{backgroud-size:cover !important} in questo modo prendi la priorita rispetto a quella regola dell'elemento (che da qualche parte arriverà ma chissa perche')

[ellezero]

giusto perche tu lo sappia l'ho testato quello slide background adesso e ridimensiona la larghezza ma l'altezza mica tanto... funziona stranetto per i miei gusti

anche il box sotto di fbook non e' responsive..

[Uliano]

Grazie!!!
Ora sembra funzionare (almeno sull'iphone). Stasera verifico anche sull'ipad...
Per sicurezza ho aggiunto "!important" anche in:
-webkit-background-size: cover;       
-moz-background-size: cover;       
-o-background-size: cover;
così si vede bene sia in larghezza che in altezza
:-D

Non mi ero ormai accorto che il Facebook Like Box non era responsive :-(
Questo è il codice preso da Facebook per la Like Box:



<div id="fb-root"><>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


<div class="fb-like-box" data-href="http://www.facebook.com/fabioulianograsselli" data-width="441" data-height="600" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="true" data-show-border="true"><>


L'ho inserito in un modulo HTML assegnato alla posizione "home-c-l" del template...
Secondo te posso agire direttamente su questo per renderlo responsive, o meglio che lavori su template.css (#home-c-l)?
La cosa strana è che il Box di Twetter (che è in "home-c-r") è responsive :-)

[ellezero]

eh ma non sono le posizioni a non essere responsive... sono i moduli!! in questo caso, se lui avesse una larghezza diciamo di 250px dovrebbe funzionare ma ti consiglio di cercarne uno responsive sulla jed

[Uliano]

Fatto!!!
Grazie mille!!!
 

[ellezero]

Uliano!
non dimenticarti di inserire il [risolto] nel titolo del tuo primo post!!
grazie, ciao!