Visualizzazione dei risultati da 1 a 6 su 6

Discussione: Problema logo centrato

  1. #1

    Problema logo centrato

    Salve a tutti, stavo cercando di centrare il logo ed effettivamente ci sono riuscito con :
    padding-left: 450px;

    Il problema avviene in modalitàresponsive, dove il logo ovviamente, viene visto all'estrema destra.

    La classe è navbar-brand, sto cercando una soluzione, ma non riesco..
    Dovrei in qualche modo centrare proprio il logo e non spostarlo solamente.

    qui il link

  2. #2
    Ciao,

    La soluzione che hai adottato è normale che non funziona in modalità responsive.
    Per adattarlo a tutti i dispositivi devi usare le Media Queries.

    Ho provato ad analizzare il tuo template e le Media Queries dovrebbero essere queste : (non ne sono sicuro però, senza aver il codice css sotto mano)

    togli il padding-left: 450px; e inserisci questo codice, e cambi il valore 450px e metti il tuo valore corretto per il range --> vedi se ridimensionando lo schermo succede qualcosa.:

    codice:
    @media screen and (min-width: 992px) and (max-width: 1200px) {
    .templatemo-top-menu .navbar-brand {
        margin: 30px 450px auto!important; /*cambi il valore 450px e metti il tuo valore corretto per il range*/
    }
    }
    
    @media screen and (min-width: 768px) and (max-width: 991px) {
    .templatemo-top-menu .navbar-brand {
        margin: 30px 450px auto!important; /*cambi il valore 450px e metti il tuo valore corretto per il range*/
    }
    }
    
    @media (max-width: 767px) {
    .templatemo-top-menu .navbar-brand {
        margin: 30px 450px auto!important; /*cambi il valore 450px e metti il tuo valore corretto per il range*/
    }
    }

  3. #3
    Grazie per la risposta, solo che di @media ce ne sono di molte più risoluzioni.
    Qui puoi vedere il css bootstrap e template

  4. #4
    Ho visto che c'è ne sono molte, ma dovrei aver già schermato quelle relative alla parte del logo.

    Prova a inserire il codice sopra all'interno del file e salvare... cambia il secondo e terzo range i valori e vedi cosa succede e se risponde.

    Per esempio inserisci questo codice :
    codice:
    
    
    
    @media screen and (min-width: 992px) and (max-width: 1200px) {
    .templatemo-top-menu .navbar-brand {
        margin: 30px 450px auto!important; /*cambi il valore 450px e metti il tuo valore corretto per il range*/
    }
    }
    
    
    @media screen and (min-width: 768px) and (max-width: 991px) {
    .templatemo-top-menu .navbar-brand {
        margin: 30px 200px auto!important; /*cambi il valore 450px e metti il tuo valore corretto per il range*/
    }
    }
    
    
    @media (max-width: 767px) {
    .templatemo-top-menu .navbar-brand {
        margin: 30px 50px auto!important; /*cambi il valore 450px e metti il tuo valore corretto per il range*/
    }
    }

  5. #5
    Perfetto! Il logo in responsive è centrato! Magnifico!
    Solo che nel sito rimane a sinistra.

  6. #6
    Bene, allora i range rispondono. Basta che ci "giochi" con il valore del margine finchè non è centrato perfettamente, in base alla risoluzione.

    Prova ad aggiungere questo nuovo range e cambia il valore :

    codice:
    @media screen and (min-width: 1201px) {
    .templatemo-top-menu .navbar-brand {
        margin: 30px 450px auto!important; /*cambi il valore 450px e metti il tuo valore corretto per il range*/
    }
    }

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.