Wowslider > responsive V13pro: distaccato dal menu 
Autore: Francesco Tedeschi
Visite 369,
Followers 3,
Condiviso 0
Salve ragazzi....
ho inserito 2 slide nel mio progetto tramite wowslider e nalla visualizzazione desktop è tutto ok ma nella visualizzazione responsive le slide si distaccano dal menu.....
ho cercato qualche soluzione al problema nell' help center senza successo.
C'è un modo per risolvere questo problemino?
link al progetto: http://www.provino86x.altervista.org/wowslider/
allego screenshot
Grazie di cuore ;)
Postato il
Autore
avevo dimenticato lo screen :) lo allego qui Grazie
Probabilmente devi dare stessa altezza ad header e menù alle varie visualizzazioni al PASSO 2 MODELLO/Personalizzazione/Struttura del Modello. Sicuramente hai altezze diverse degli elementi che ti ho indicato sopra, cioè nei breakpoint più alti (visualizzazione desktop) hanno un determinato valore, mentre ai breakpoint più bassi (visualizzazione mobile) tali valori sono diversi, mettili tutti uguali a tutte le visualizzazioni e dovresti risolvere.
Autore
Grandee
! Si era questo il problema
Solo che in breakpoint alti (visualizzazione desktop) il menu va bene così come l'ho impostato (altezza 150)
e in breakpoint bassi (responsive) il menu ad altezza 150 è troppo grande.....
... hai usato il mio codice con iframe dinamico, ma! non hai usato l'opzione adeguata e consigliata:
... altrimenti occorrerebbe riprogettare o trovare rimedi sconsigliabili con possibili effetti collaterali ...
https://helpcenter.websitex5.com/it/post/168396
.
Autore
Si kolasim ho inserito il tuo codice
e grazie per tutto l'aiuto che dai.
Proverò domani con il tuo consiglio.. , ma quindi come suggerisci tu, di mettere il menu sopra l'header non ho bisogno di inserire in tutti i breakPoint le stesse misure del Header e del top?
... sì, penso di no! ...
... al limite si dovrà posizionare il top del div_custom rispetto all'header, o allungare l'header, a seconda di come avrai impostato, in quanto la visibilità del content si regola in base a questo...
.
Autore
nel breakpoint a 480px ho impostato il menu ad altezza 40px in quanto averlo a 90px (come da breakpoint 1400 - 1200 - 960 - 720) risultava molto grande nella visualizzazione da smartphone.
Pur avendo impostato il menu sopra all'header come suggerito da KolAsim visualizzo lo spazio bainco tra l'intestazione e l'indizio delle slide..... ho esportato il sito in rete per rendervi l'idea.... http://www.provino86x.altervista.org/wowslider/
... meglio questa disposizione rispetto alla precedente rispetto al codice usato...
... ho fatto un clone flashhhh ...
... il codice lo rilevi dal rigo 28 al 39 compreso...
... > esempio 1 ... con rapporto (3:1) (senza effetto 3D) ...
... > esempio 2 ... con rapporto (13:4) (con effetto 3D) ...
...
... le uniche variazioni sono il TOP del DIV_CUSTOM, ed il media_query che lo controlla a 480px con valori TOP 91 e 40 ...
... come vedi, adesso il CONTENT rimane correttamente allineato...
.
Autore
Grande !!
quindi il codice che rilevo (a cui fai riferimento) devo sostituirlo a qualche altro codice? o devo aggiungerlo?
... per fare più rapidamente, lo sostiuisci solo in HEAD al precedente, e che sarebbe per l'esempio 1, questo:
<style> #div_iframe {position:absolute;top:91px;width:100%; z-index:1}
@media (max-width: 479px) { #div_iframe {top:40px}}</style>
<script>function h_iframeK(){
var ww =13; // larghezza immagini;
var hh =4; // altezza immagini;
var wdiviframe = document.getElementById('div_iframe').offsetWidth;
var hiframe=Math.round(wdiviframe*hh/ww);
document.getElementById('iframek').style.height=hiframe +"px";
document.getElementById('imHeader').style.height=hiframe +"px";}
window.onload = function () {h_iframeK();}
window.onresize = function () {h_iframeK();} </script>
.
Autore
Grazie, va bene
:) tvb KolAsim
... vedo nel tuo esempio che il codice risulta inserto due volte, il precedente con il nuovo appena postato prima...
... il precedente, quello che si vede dal rigo 27 al rigo 36 del sorgente (Ctrl+U), lo devi eliminare...
... in HEAD devi usare solo il nuovo...
.
ciao