Visualizzazione risultati 1 fino 7 di 7

Discussione: Problema posizione Banner

  1. #1
    followersitalia non è connesso Neofita
    Data registrazione
    15-03-2020
    Messaggi
    4

    Predefinito Problema posizione Banner

    Buonasera, ho inserito i banner pubblicitari sul mio sito bootstrap ma ho subito avuto dei problemi.

    Da PC il banner viene visualizzato correttamente e nella giusta posizione, mentre da smartphone compare sempre in alto al sito per poi sparire dopo qualche secondo. Per far capire lascio a voi una pagina di prova:

    http://www.followersitalia.altervista.org/try.php

    In questa pagina il banner è posizionato direttamente sotto il testo in latino, ma da smartphone nonostante si apra lo spazio web per ospitare il banner, questo compare in alto.

    Sapete dirmi se esiste un modo per forzare la posizione anche da smartphone? Può essere un problema di conflitto tra js?

    Grazie in anticipo!
    Ultima modifica di followersitalia : 25-04-2020 alle ore 22.00.27

  2. #2
    GraphOGLRisorse non è connesso AlterGuru 2500
    Data registrazione
    14-02-2015
    Messaggi
    4,285

    Predefinito

    Salve,
    se ha un AlterSito, può aggiungere il codice per rendere il sito resposive, che le permette di personalizzare l'aspetto a seconda del dispositivo. Così il sito si adatterà automaticamente da desktop a mobile, a seconda del tipo di dispositivo da cui viene visualizzato.

    Qui le lascio un esempio di sito con codice responsive.http://graphoglrisorse.altervista.or...esponsive.html
    Può ricopiare la pagina e usare il codice liberamente. Per osservare nell'esempio il comportamento rensponsive, le basta variare le dimensioni della finestra browser in cui lo esegue.

    Cordiali saluti.
    Ultima modifica di GraphOGLRisorse : 25-04-2020 alle ore 23.27.09

  3. #3
    followersitalia non è connesso Neofita
    Data registrazione
    15-03-2020
    Messaggi
    4

    Predefinito

    Salve grazie per la risposta.
    Ho sempre avuto presente tra le mie pagine questa stringa di codice:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    E sembra essere proprio questo la causa del problema in quanto eliminandolo il sito perde le proporzioni ma posiziona il banner proprio dove dovrebbe

  4. #4
    GraphOGLRisorse non è connesso AlterGuru 2500
    Data registrazione
    14-02-2015
    Messaggi
    4,285

    Predefinito

    Si, quel meta tag serve per la modalità resposive. La soluzione migliore comunque sarebbe quella di lasciare quel meta tag è operare sulla classe css che causa quel comportamento.

    In uno dei file css cariati dalla pagina, sicuuramente c'è la classe caricata nel "div" del banner. La classe css usata per variare la posizione del banner da mobile è contenuta all'interno di un blocco simile.
    @media only screen and (min-width: 600px) {
    .....................
    }
    Se lei modifica opportunamente il codice di riferimento, può eliminare lo spostamento senza togliere l'adattamento automatico della pagina. Se non ha idea di cosa modificare, può mostrarmi il blocco (o blocchi) con la classe del "div" usato per il banner. Così posso fere le verifiche e poi indicarle le modifiche.

    Cordiali saluti.
    Ultima modifica di GraphOGLRisorse : 27-04-2020 alle ore 13.14.07

  5. #5
    followersitalia non è connesso Neofita
    Data registrazione
    15-03-2020
    Messaggi
    4

    Predefinito

    Il banner è inserito all'interno di molti div che richiamano diverse classi e nei fogli di stile ci sono vari blocchi di quel tipo, per cui per semplificare ho fatto una prova: ho inserito il banner fuori da tutti i div all'interno del tag body e il problema persiste.

    Non so se provando a creare una classe ad hoc per il banner all'interno di un tipo di blocco del genere potrei risolvere.


    EDIT: In questo momento credo di aver trovato il reale problema, ovvero un plugin che consente lo "slide-up" di alcuni div del sito. Il plugin in questione si compone di due file .js e funziona aggiungendo "js-animate" nella classe del div che voglio animare, rimuovendo questa parte di codice da tutte le classi rimuovo anche il problema.

    Non sono certo però che dipenda solo da questo, può essere?
    Ultima modifica di followersitalia : 27-04-2020 alle ore 22.04.28

  6. #6
    GraphOGLRisorse non è connesso AlterGuru 2500
    Data registrazione
    14-02-2015
    Messaggi
    4,285

    Predefinito

    Si, può risolvere il problema.

    Se riabilita su una pagina il meta tag per il resposive, e poi prova a variare col mouse le dimensioni del browser, in modo da ricreare circa quelle di uno smartphone, risulta uglamente spostato in alto?
    In alternativa, può provare anche con questo: EmulatoreSmartPhone

    Usando l'esempio che ho messo in precedenza, può vedere che l'adattamento avviene anche col browser.

    Può verificare con un altro smartphone?

    Cordiali saluti.
    Ultima modifica di GraphOGLRisorse : 27-04-2020 alle ore 18.24.01

  7. #7
    followersitalia non è connesso Neofita
    Data registrazione
    15-03-2020
    Messaggi
    4

    Predefinito

    Si ho già fatto questo tentativo.
    Sia con l'emulatore sia con il "ridimensionamento" del browser il banner risulta stare al suo posto e rispetta anche le regole inserite all'interno del suo blocco @media only...".

    Il problema subentra nel momento in cui apro la pagina direttamente da smartphone, il div in cui il banner è inserito rispetta le regole mentre il banner stesso compare in alto centrale e poi sparisce dopo pochi secondi.

    Ho già provato da diversi smartphone e con diversi browser, si comporta sempre allo stesso modo.


    EDIT: In questo momento credo di aver trovato il reale motivo di questo comportamento, ovvero un plugin che consente di "animare" un div in comparsa. Questo si compone di due file .js e si attiva inserendo "js-animate" nella classe del div che si vuole animare. Ho rimosso tutti i js-animate dalle varie classi dei vari div e il problema sembra essere risolto.

    Non sono certo però che dipenda solo da questo o se sono costretto a rinunciare a questo tipo di plugin
    Ultima modifica di followersitalia : 27-04-2020 alle ore 22.09.24

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •