Website X5 – Codice css per nascondere i banner desktop e tablet nella visuali 
Autore: Giorgio B.Ciao a tutti!
Sto cercando una soluzione tramite codice CSS da inserire in WebSite X5 Pro per gestire correttamente la visualizzazione dei banner nelle diverse modalità responsive.
Ho creato dei banner specifici per la versione desktop e altri dedicati esclusivamente alla versione smartphone.
Il mio problema è che, utilizzando la funzione “Mostra/Nascondi” nelle impostazioni responsive, riesco a nascondere i banner alle risoluzioni più basse, ma il comportamento non è quello che vorrei: i banner che dovrebbero essere visibili solo su desktop continuano a rimanere attivi nella visualizzazione desktop, mentre vorrei gestire in modo preciso la loro comparsa e scomparsa in base alla risoluzione.
La mia domanda è questa:
Esiste un codice CSS, magari utilizzando le media query, che permetta di:
Visualizzare i banner desktop esclusivamente su PC e tablet, nascondendoli nella versione smartphone.
Visualizzare i banner creati appositamente per smartphone soltanto sui dispositivi mobili.
Gestire il tutto in base alla larghezza dello schermo, ad esempio con breakpoint a 920 px e 720 px.
Evitare sovrapposizioni o la visualizzazione contemporanea dei banner desktop e mobile.
Se qualcuno ha già affrontato questo problema, potrebbe indicarmi il codice CSS corretto e spiegarmi dove inserirlo in WebSite X5 Pro?
Grazie in anticipo a chi potrà darmi una mano!
... sì, con CSS EXTRA è possibile con una delle mie idee basate sul div_sino che a seconda dei casi può avere applicazioni diverse...
... puoi prendere spunto da una delle basi storiche della mia idea sparse nel Forum, una di queste per esempio si trova in questo Topic:
https://helpcenter.websitex5.com/it/post/240741
.
... nel caso, se tu posti il LINK del tuo esempio di prova e/o del sito online, potrei entrare più specificamente nel merito ed eventuali combinazioni...
.
ciao
.
Autore
Grazie KplAsim
per il momento non ho messo online il sito ma stò solo provando con anteprima. Visito il tuo link e ti fò sapere. Grazie di nuovo
... OK ... ciao ...
Autore
Ciao, allego una foto della pagina in modalità responsive per spiegare meglio il problema che sto riscontrando.
Nell'immagine è presente il banner 4. Quando lavoro sulle responsive e lo elimino alla risoluzione di 960 px, il banner scompare automaticamente anche alle risoluzioni inferiori. Tuttavia, alla risoluzione di 920 px continua a essere visibile.
Il problema principale è che, una volta eliminato il banner alle risoluzioni più basse, non riesco più a recuperarlo per gestirlo nelle successive modalità responsive, ad esempio a 720 px o a risoluzioni ancora inferiori.
Quello che vorrei fare è inserire nella homepage dei nuovi banner progettati appositamente per la versione smartphone e gestire la loro visualizzazione in modo indipendente:
Alle risoluzioni desktop, visualizzare i banner 1, 2 e 3.
Alle risoluzioni più basse, nascondere i banner desktop.
Alle risoluzioni smartphone, visualizzare il banner 4 o altri banner specifici creati per il mobile.
Vorrei riuscire a gestire tutto questo direttamente attraverso le impostazioni responsive di WebSite X5, senza che eliminando un banner a una determinata risoluzione questo scompaia anche dalle successive, impedendomi di gestirlo come vorrei.
Esiste un modo per ottenere questo risultato, magari tramite CSS e media query, oppure sto sbagliando qualcosa nella gestione delle responsive di WebSite X5?
Grazie a chi potrà aiutarmi a capire come risolvere il problema!
... intanto mi son ricordato che avevo questo vechio esempio fatto per altri topic:
https://kolasim.websitex5.me/mostra-nascondi/ibrido.html
.
... ho visto che hai ripostato....
... sì. con tutto extra o espert fai prima e tieni tutto sotto controllo più facilmente...
... praticamente puoi mettere diverse gallerie uguali, ma ognuna perfezionate per le risoluzioni intermedie, in modio che si veda solo quella relativa alla risoluzione voluta...
... il mio mettodo si può usare in vari modi ed in varie aree, per esempio qui cambia lo sfondo per le risoluzioni basse:
https://kolasim.websitex5.me/mostra_nascondi_sfondorigaX/cambia_sfondo_2.html
... una delle applicazioni usate era per sostituire l'oggetto facebook con una immagine nelle basse risoluzioni...
ciao
.
Autore
Grazie Mille Kolsim, mo provoe ti fò sapere.
Autore
ho visto, il mio problema è che su website x5 pro 2024 non ho il comando codice al suo posto c'è il comando effetto.allego immagine.
... ah! ... OK ... nessun problema, il mio codice funziona anche per le prime versioni del programma...
... puoi usare lo schema della pagina expert ad incollare lì il codice nelle Proprietà della Pagina, sezione Esperto, opzione: Prima della chiusura del tag /head; ...oppure puoi usare un oggetto codice html messo in quella pagina ed incolarvi il codice nella scheda html, o senza tag <style> nella scheda Esperto dello stesso oggetto ...
... questo il precedente schema dela pagina
.
ciao
.
Autore
Buongiorno ho provato ad inserire il codice del primo link che mi hai inviato ma resta tutto identico a prima a risoluzioni basse il banner desktop sparisce ma a risoluzione normale si vedono sia banner desktop che mumbai. molto probabilmento sbaglio io. lascio file con codice inserito riga 37.
Grazie
... se l' ID del selettore-Div é corretto, da quel che vedo dal tuo STAMP manca l'imbottitura nel tag <STYLE> come nel mio STAMP...
.
Ciao
.
Autore
Grazie mille KolAsim
.. OK ... ciao