[RISOLTO] Logo immagine responsive

[tamedef]

Ciao ragazzi, giocando con la parte superiore all'header di questo sito www.nutrizionistariccardomattolin.it mi sono messo a litigare con l'aggiunta di un logo nel div sp-logo accanto alla scritta con il nome del sito. Vorrei aggiungere un immagine, però, essendo il template responsive, dovrebbe ridimensionarsi con esso e magari scomparire sotto una certa risoluzione. Troppo complicato?

[adottauncane]

Ciao tamedef,
il logo immagine o scritta, lo gestisci da backend. Hai deiverse opzioni, per mobile ecc.
Se vuoi un'immagine con del testo fai un'unica immagine che lo comprenda.

[tamedef]

Si ne avevo già preparata una mettendo tutto insieme, ma non mi piaceva che lasciava troppo spazio fra inizio pagina e l'header, considerando che ho impostato

#sp-logo {
    margin: 0px 0px 0px 0px;
}


e anche il padding a 0


deduco che lo spazio che mi rimane sia imposto dalle dimensioni limitate in lunghezza di sp-logo in favore di sp-menu.
Come posso dare più spazio in larghezza al logo senza modificare le impostazioni del template responsive?
Thanks

[adottauncane]

Ma non è più semplice fare l'immagine nella dimensione giusta? Quella è larga più di 800px...

Comunque puoi aggiungere questo:

Codice: [Seleziona]

.logo img {width:100% !important; height:100% !important;}
ma fai il file custom.css che è meglio.

[tamedef]

Si l'immagine comunque la devo ridimensionare, ma il problema non è quello, è il rapporto fra altezza e lunghezza, il logo si dovrebbe sviluppare maggiormente in lunghezza e nonostante il codice che mi hai postato riesco a ingrandire solo l'altezza, invece la larghezza massima rimane bloccata dal div sp-menu nonostante il comando width:100%

[adottauncane]

Forse mi sfugge il problema... Fai l'immagine come vuoi che sia. Perché la vuoi deformare dopo?

[tamedef]

no assolutamente non la voglio deformare...ma se metto un immagine facciamo esempio di 200px non mi arriva ai 200 px..si ferma prima perchè c'è il div del menu che me la blocca.

[adottauncane]

Prova così:

Codice: [Seleziona]

.col-md-9 {
    width: 65% !important;
}
.col-md-3 {
    width: 35% !important;
}

#sp-header {
height:110px !important;
  padding-top:10px;
}
però fai 'sto file custom.css...

[tamedef]

Allora il logo si sistema come volevo inserendo questo codice, però poi mi cambia anche i rapporti del layout della parte sotto l'header e quindi la colonna di destra con articoli e galleria diventa troppo grande.


Ps: io già inserico le instruzioni nel custom.css del template, non ti riferisci a quello?

[adottauncane]

Ps: io già inserico le instruzioni nel custom.css del template, non ti riferisci a quello?

Sì, solo che io non lo vedo... Ma se c'è ok.

Mi spiace, non riesco a trovare un css che vada bene...

[tamedef]

Non capisco, la percentuale di spazio riservata al menu e quella riservata al logo deve essere impostata da qualche parte nel template o sbaglio? Non posso modificare semplicemente quella?

[adottauncane]

Può anche essere che no, se usano il css di un'altra parte del template, come si è verificato. Può essere che sì e non la vedo. Può essere che si possa scrivere ad hoc in modo che sia univoca ma adesso non capisco come e dove hai posizionato il marchio...
L'unica è cercare con Firebug e provare a scriverne una per quel pezzo.
O magari fare una nuova posizione a cui assegnare il marchio.

[adottauncane]

Prova ancora questo, poi cedo...

Codice: [Seleziona]

.logo img {
    height: 100%;
    max-width: 66% !important;
}

#sp-header {
    height: 150px !important;
    padding-top: 5px;
}

Il secondo è da sostituire probabilmente ad un altro con 110px se vedi che non funziona.

[tamedef]

Grazie mille adottauncane, ho risolto modificando un pò il codice che hai postato e va alla grande
[/code]

Codice: [Seleziona]

.logo img {
    height: 45%;
    max-width: 150% !important;
}


#sp-header {
    height: auto !important;
    padding-top: 5px;
    padding-bottom: 5px;
}



[adottauncane]

Mmmm, però così ti rimane sul menù...

[tamedef]

Cioè intendi che con risoluzioni più basse il menù viene coperto dal logo?

[adottauncane]

No, su quelle più strette va bene, il menù sparisce. Su quelle sopra i 960px.

[adottauncane]

Anzi nemmeno su quelle più strette, esce. Se lo lasci grande così metti 65%. Oppure riduci l'immagine.

[tamedef]

Si ho impostato che sotto i 760px di larghezza il menu sparisce, ho praticamente il problema fra i 760 e 990 pixel dove il menu compare sotto al logo, ma mi sono accorto che anche cancellando quel codice il problema rimane.

[tamedef]

Ho fatto un pò di modifiche al logo e sto provando a inserire un altro menù, per capire se riesco a risolvere il problema legato al responsive (dimensioni tablet) però non riesco a capire come riuscire a centrarlo in altezza e allinearlo a sinistra, nel custom.css inserisco # gruemenu.grue_126 {  seguito dal codice dove sbaglio?