4.x FollowTab IPS 4.0

[Max]

Ciao a tutti, avrei un problemino con una modifica fatta al forum, in sostanza è una tab inserita a lato del forum con i pulsanti che puntano ai vari social, sul forum nessun problema ma quando si usano dispositivi mobili ecco che si presenta il problema e in sostanza in fondo al forum con un dispositivo mobile si vede così:

 

 

il codice corrispondente per questa modifica è il seguente:

 <style type="text/css">#followTab{list-style:none;position:fixed;z-index:5;right:0;top:250px;width:29px;padding:8px 0px;border:3px solid #fff;border-right:none;-moz-border-radius:10px 0 0 10px;-webkit-border-radius:10px 0 0 10px;border-radius:10px 0 0 10px;-moz-box-shadow:0 0 7px rgba(0,0,0,.6);-webkit-box-shadow:0 0 7px rgba(0,0,0,.6);box-shadow:0 0 7px rgba(0,0,0,.6);background: #DCDCDC;}#followTab li{margin:9px 0 0 0;line-height:0}#followTab li:first-child{margin-top:0}#followTab a{display:block;width:24px;}#followTab a span{position:absolute;top:-999em}@media (max-width: 979px) {#followTab {    position: relative !important;  }   </style><ul id="followTab"><li><a href="https://www.facebook.com/gameinvadersforumfanpage" title="Seguici su Facebook" target=_blank><img src="http://www.gameinvaders.it/forum/images/modernvb/facebook.png" onmouseover="this.src='http://www.gameinvaders.it/forum/images/modernvb/facebook_span.png'" onmouseout="this.src='http://www.gameinvaders.it/forum/images/modernvb/facebook.png'" /></a></li><li><a href="https://twitter.com/Forum_GInvaders" title="Seguici su Twitter" target=_blank><img src="http://www.gameinvaders.it/forum/images/modernvb/twitter.png" onmouseover="this.src='http://www.gameinvaders.it/forum/images/modernvb/twitter_span.png'" onmouseout="this.src='http://www.gameinvaders.it/forum/images/modernvb/twitter.png'" /></a></li><li><a href="https://www.youtube.com/channel/UCcCyv3DsBo7SkqA7S8CO0VA" title="Seguici su Youtube" target=_blank><img src="http://www.gameinvaders.it/forum/images/modernvb/youtube.png" onmouseover="this.src='http://www.gameinvaders.it/forum/images/modernvb/youtube_span.png'" onmouseout="this.src='http://www.gameinvaders.it/forum/images/modernvb/youtube.png'" /></a></li><li><a href="https://plus.google.com/u/0/117850802626541556261/posts" title="Seguici su Google+" target=_blank><img src="http://www.gameinvaders.it/forum/images/modernvb/google.png" onmouseover="this.src='http://www.gameinvaders.it/forum/images/modernvb/google_span.png'" onmouseout="this.src='http://www.gameinvaders.it/forum/images/modernvb/google.png'" /></a></li><li><a href="http://www.gameinvaders.it/forum/search/'>http://www.gameinvaders.it/forum/search/" title="Ricerca Avanzata"><img src="http://www.gameinvaders.it/forum/images/modernvb/search.png" onmouseover="this.src='http://www.gameinvaders.it/forum/images/modernvb/search_span.png'" onmouseout="this.src='http://www.gameinvaders.it/forum/images/modernvb/search.png'" /></a></li><li><a href="http://www.gameinvaders.it/forum" title="Home"><img src="http://www.gameinvaders.it/forum/images/modernvb/home.png" onmouseover="this.src='http://www.gameinvaders.it/forum/images/modernvb/home_span.png'" onmouseout="this.src='http://www.gameinvaders.it/forum/images/modernvb/home.png'" /></a></li></ul>

il codice è stato inserito alla fine del template footer prima della chiusura </div>

 

BomAle mi ha già risposto sul forum ufficiale e l'immagine è stata fornita da lui ma purtroppo l'inglese non è il mio forte ecco il motivo di questo topic.

Qualche suggerimento per far in modo che la tab sui mobile non risulti prendere tutto lo schermo ma visualizzarla come sul forum?

Grazie a tutti, in particolare a BomAle 

[Askancy]

mmm...ok, ma perchè sul mobile lo vedo in orizzontale e non in verticale come sul pc?

Perchè il codice HTML lo devi mettere dopo il tag </footer> sennò prende il width: 100% del footer e ti da quel problema.

[Askancy]

CSS

@media (max-width: 979px) {#followTab li {  display: inline-block;}#followTab {text-decoration: none;list-style: none;float: left;display: inline-block;-moz-border-radius:10px 0 0 10px;-webkit-border-radius:10px 0 0 10px;border-radius:10px 0 0 10px;-moz-box-shadow:0 0 7px rgba(0,0,0,.6);-webkit-box-shadow:0 0 7px rgba(0,0,0,.6);box-shadow:0 0 7px rgba(0,0,0,.6);background: #DCDCDC;border-right:none;border:3px solid #fff;padding:8px 0px;width:29px;top:250px;}}

 

Fammi sapere

[Max]

Ciao, si và bene per il mobile ma per il forum no...così và in fondo a tutto e la visualizzazione è in verticale tutto spostato sinistra.

[Askancy]

Ciao, si và bene per il mobile ma per il forum no...così và in fondo a tutto e la visualizzazione è in verticale tutto spostato sinistra.

Mi puoi mettere il css di come lo hai inserito? Hai sostituito solo la parte mobile?

Comunque il codice css mettilo nel file .css ( ci dovrebbe stare custom.css se non ricordo male )

[BomAle]

forse hai sbagliato a posizionare il codice proposto da askancy, ricontrolla appena possibile.

edit: sembra che prima di </style> manchi una parentesi graffa di chiusura... aggiungila } e inserisci subito dopo il codice di askancy...

altrimenti combinalo con l'altra dichiarazione @media

[Max]

Grazie ragazzi...penso che così potrebbe andare, sia sul forum che sul mobile.

 

Mi puoi mettere il css di come lo hai inserito? Hai sostituito solo la parte mobile?
Comunque il codice css mettilo nel file .css ( ci dovrebbe stare custom.css se non ricordo male )

Ho messo il codice postato da te nel custom.css, ho aggiunto la parentesi graffa mancante al mio codice presente nel template footer.

Modificato 23 Luglio 2015 da Max

[Askancy]

Grazie ragazzi...penso che così potrebbe andare, sia sul forum che sul mobile.

 

Ho messo il codice postato da te nel custom.css, ho aggiunto la parentesi graffa mancante al mio codice presente nel template footer.

Ovviamente se il codice CSS lo hai messo nel custom.css ricordati di levarlo dall'html lo style...

[Max]

Ovviamente se il codice CSS lo hai messo nel custom.css ricordati di levarlo dall'html lo style...

levando il css dal template footer sul forum si vede così:

 

 

mentre se lo lascio si vede in maniera corretta:

 

[Askancy]

Ovvio devi mettere anche quel css nel custom css...

Sennò lascia stare così almeno non ti complichi la vita, anche se non è la maniera corretta...

#followTab{list-style:none;position:fixed;z-index:5;right:0;top:250px;width:29px;padding:8px 0px;border:3px solid #fff;border-right:none;-moz-border-radius:10px 0 0 10px;-webkit-border-radius:10px 0 0 10px;border-radius:10px 0 0 10px;-moz-box-shadow:0 0 7px rgba(0,0,0,.6);-webkit-box-shadow:0 0 7px rgba(0,0,0,.6);box-shadow:0 0 7px rgba(0,0,0,.6);background: #DCDCDC;}#followTab li{margin:9px 0 0 0;line-height:0}#followTab li:first-child{margin-top:0}#followTab a{display:block;width:24px;}#followTab a span{position:absolute;top:-999em}@media (max-width: 979px) {#followTab li {display: inline-block;}#followTab {text-decoration: none;list-style: none;float: left;display: inline-block;-moz-border-radius:10px 0 0 10px;-webkit-border-radius:10px 0 0 10px;border-radius:10px 0 0 10px;-moz-box-shadow:0 0 7px rgba(0,0,0,.6);-webkit-box-shadow:0 0 7px rgba(0,0,0,.6);box-shadow:0 0 7px rgba(0,0,0,.6);background: #DCDCDC;border-right:none;border:3px solid #fff;padding:8px 0px;width:29px;top:250px;}}

[Max]

mmm...ok, ma perchè sul mobile lo vedo in orizzontale e non in verticale come sul pc?

[Max]

Ma quindi il codice html non và inserito nel template footer ma nel global dopo il tag </footer>?

[Askancy]

Ma quindi il codice html non và inserito nel template footer ma nel global dopo il tag </footer>?

Esattamente. fammi sapere se va bene così o altro

[Max]

Così dovrebbe essere perfetto...adesso manca solo metterlo come plugin a pagamento nel marketplace