Showbox responsive
Author: Marta K.
Visited 129,
Followers 1,
Shared 0
E' possibile che lo showbox si apra con misure proporzionali alla finestra del browser e non con proporzione fissa?
Su mobile diventa abbastanza illeggibile quando è in proporzione orizzontale.
Grazie
Posted on the
Avevo già chiesto molto tempo fà una cosa del genere, ma mai presa in considerazione.
Eventualmente vedi se ti può essere utile questo post:
https://helpcenter.websitex5.com/en/post/239988
... per lo showbox aperto proporzionalmente in base alla finestra ospite, per esempio in modo FullScreen con un margine del 10% dai bordi, si potrebbe per le risoluzioni inferiori con un mio codice EXTRA, ...ma per poter valutare occorrerebbe postare il LINK della pagina in cui si apre lo showbox...
.
Author
Grazie per la risposta.
Modificare il codice a mano è fattibile ma estramente scomodo. La funzione dovrebbe essere integrata in WebsiteX, altrimenti ogni variazione del sito bisognerebbe aprire il codice, modificarlo, salvarlo e rifare la stessa cosa per le versioni in lingua.
... no! ... non è così ... la personalizzazione rimane integrata nel progetto senza dover toccar niente in futuro...
... tieni presente che nel programma hai le sezioni per Esperti, oltre che gli Oggettti Codice HTML, ...per tutte le personalizzazioni possibili...
.
ciao
.
Author
Ah! E come si fa?
Author
Il sito è MOLTO in costruzione: http://lajen.com/2024/ i popup si aprono dalle etichette sulla destra.
Grazie
Author
Forse è meglio specificare che ciò che è fatto con website è solo il contenitore di iframe che contiene il tour virtuale, su cui ci sono i bottoni laterali e il logo.
... OK ... il mio codice ... regolarizza il livello delle etichette fisse per evitare duplicazioni dello showbox...
... attiva lo showboz FULL sotto al breakpoint 720px...
(... alle etichette fisse secondo me forse andrebbe trovata altra ubicazione per le risoluzioni inferiori...)
... questo è il codice:
<style>
#pluginAppObj_02, #pluginAppObj_03, #pluginAppObj_04 {z-index:100 !important}
@media (max-width: 720px){/* showbox Full by KolAsim */
#imShowBox{width:90% !important;height:90% !important;
top: 50% !important; left: 50%!important;
transform: translate(-50%, -50%) !important}}
</style>
---------------------------------------
... il codice lo devi incollare nelle Proprietà di quella Pagina, esattamente in questa sezione:
> Passo 3 - Mappa > Finestra 'Proprietà Pagina' > Le opzioni della Sezione Esperto >
▪Codice personalizzato: > 3^opzione > Prima della chiusura del tag HEAD
.
... se ti servissero chiarimenti o suggerimenti, ... avvisami...
.
ciao
.
Author
Grazie 1000! Domani ci provo. Ciao
Author
Ti rigrazio però c'é un problema. Il risultato è questo:
... ah! ... OK ... sostituisci il codice con questo:
<style>
#pluginAppObj_02, #pluginAppObj_03, #pluginAppObj_04 {z-index:100 !important}
@media (max-width: 720px){/* showbox Full by KolAsim */
#imShowBox > div, #imShowBox > div iframe{
width:100% !important;height:100% !important;}
#imShowBox{
width:90% !important;height:90% !important;
top: 50% !important; left: 50%!important;
transform: translate(-50%, -50%) !important}}
</style>
...
... nota: ... correggi il posizionamento degli oggetti in HEADER della pagina importata nello showbox, bandiere e barra grigia escono fuori layout sulla destra nelle risoluzioni inferiori...
.