PDA

Visualizza la versione completa : Problema logo centrato


Alexanders
12-04-2016, 13:57
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 (http://lordzz.altervista.org/test/)

emi10
12-04-2016, 16:58
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.:


@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*/
}
}

Alexanders
12-04-2016, 17:11
Grazie per la risposta, solo che di @media ce ne sono di molte pi¨ risoluzioni.
Qui puoi vedere il css bootstrap (http://lordzz.altervista.org//test/css/bootstrap.css)e template (http://lordzz.altervista.org//test/css/templatemo_style.css)

emi10
12-04-2016, 17:15
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 :






@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*/
}
}

Alexanders
12-04-2016, 17:24
Perfetto! Il logo in responsive Ŕ centrato! Magnifico!
Solo che nel sito rimane a sinistra.

emi10
12-04-2016, 17:33
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 :



@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*/
}
}

Loading