WebSite X5Help Center

 
Tommaso Tarallo
Tommaso Tarallo
User

Possibilità inserire una intestazione di grandezza opportuna per ogni breakpoin  it

Author: Tommaso Tarallo
Visited 1147, Followers 2, Shared 0  

Salve, ho il seguente problema: in Personalizzazione del Modello Responsive, se metto una intestazione di dimensioni piccole, questa si visualizza bene sul mio smartphone (in orientamento verticale) ma poi sul tablet (in orientamento verticale) questa si vede troppoa piccola; invece, se scelgo una intestazione più grande va bene per la visualizzazione su tablet (in orientamento verticale) ma sullo smartphone (in orientamento verticale) si vede tagliata.

Questo problema nasce perchè i breakpoint si riferiscono agli oggetti contenuti dentro la pagina, invece per quanto riguarda le intestazioni ci sono solo due possibilità generiche: Desktop e Mobile.

Quindi voi dovete permettere, ad ogni breakpoint, di poter inserire una nuova intestazione così da coprire in larghezza il contenuto della pagina.

Grazie.

Posted on the
16 ANSWERS - 3 USEFUL - 1 CORRECT
Giuseppe Guida
Giuseppe Guida
User

Ciao. Ma se imposti per bene due foto per l'intestazione Desktop e Responsive, la seconda leggermente più piccola della prima e le inserisci in "Sfondo dell'intestazione" invece che in Intestazione, lasciando quest'ultima settata su colore "trasparente" (o la metti proprio a zero), hai una Intestazione che si adatta a tutti i display, così come ho fatto io qui in questo template:

http://www.bozzasito003.altervista.org/pizzeria

se provi a ridurre la finestra del browser dalla larghezza massima a quella più piccola (o verifichi direttamente su smartphone e tablet), vedrai come l'intestazione (l'immagine della ragazza con pizza in mano e dietro di lei pizza gigante) si vede bene a tutte le visualizzazioni.

ciao ciao

Read more
Posted on the from Giuseppe Guida
Tommaso Tarallo
Tommaso Tarallo
User
Author

grazie ragazzi per il vostro prezioso aiuto ma meglio evitare codice esterno...

Giuseppe Guida, mi mpotresti inviare il tuo progetto così guardo come è fatto lo sfondo dell'intestazione e mi rendo conto dell'idea?

quanto devono essere grandi le due intestazioni?

Read more
Posted on the from Tommaso Tarallo
Pc Win
Pc Win
User
Giuseppe Guida
Ciao. Ma se imposti per bene due foto per l'intestazione Desktop e Responsive, la seconda leggermente più piccola della prima e le inserisci in "Sfondo dell'intestazione" invece che in Intestazione, lasciando quest'ultima settata su colore "trasparente" (o la metti proprio a zero), hai una Intestazione che si adatta a tutti i display, così come ho fatto io qui in questo template:

ciao

spiegheresti di preciso cosa intendi per quanto quotato qui sopra? nello specifico dove le setto le foto intestazione responsive e desktop nel progetto?

grazie

Fabio

Read more
Posted on the from Pc Win
Pc Win
Pc Win
User

scusa non avevo letto bene, ho risolto

grazie

Read more
Posted on the from Pc Win
Tommaso Tarallo
Tommaso Tarallo
User
Author

cpme hai risolto Pc Win?

Mi potresti spiegare in dettaglio?

Read more
Posted on the from Tommaso Tarallo
Pc Win
Pc Win
User

ciao Giuseppe

subito non avevo letto bene e non vedevo il risultato.
Alla fine se metti l'immagine in "sfondo intestazione" e non "intestazione", dopo averla ridotta, (io ho fatto almeno 3 prove prima di rtovare la misura giusta) funzionerà

E' una soluzione che non posso adottare io però perchè l'immagine è rappresentata da tanti (magari) sponsor che devo poi linkare ognuno al proprio sito e non so come fare

ciao

Read more
Posted on the from Pc Win
Tommaso Tarallo
Tommaso Tarallo
User
Author

e quando deve essere l'immagine come larghezza?

Read more
Posted on the from Tommaso Tarallo
Pc Win
Pc Win
User

questo dipende da te direi,

la mia della versione desktop era 1280, poi, come dicevo, ne ho provate diverse, fino a 480.....fai delle prove

ciao

Read more
Posted on the from Pc Win
Tommaso Tarallo
Tommaso Tarallo
User
Author

Ho effettuato delle prove seguendo i vostrio consigli ma l'intestazione risulta sempre tagliata e non si adatta alle varie visualizioni

mi potete gentilmente inviare un vostro esempio di progetto anche grezzo?

grazie: questo è il mio indirizzo email negoziopedalino[@]gmail.com

Read more
Posted on the from Tommaso Tarallo
Tommaso Tarallo
Tommaso Tarallo
User
Author

...

Read more
Posted on the from Tommaso Tarallo
Giuseppe Guida
Giuseppe Guida
User

Giuseppe P., ti ho mandato la mail con il progetto, fammi sapere se l'hai ricevuta. Ciao ciao

Read more
Posted on the from Giuseppe Guida
Tommaso Tarallo
Tommaso Tarallo
User
Author

Infinite grazie Giuseppe ma volevo che l'intestazione su mobile non si tagliava minimamente...

Read more
Posted on the from Tommaso Tarallo
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month RU

... secondo me dovrebbe poter bastare l'uso di un'immagine di misure adatte alla misura minore in larghezza che vuoi servire, per esempio 480 px;
... oppure, visto che già lo sai fare, controllare con apposite media_query diverse immagini di misure diverse per i vari intervalli che considererai...
... in extra, e secondo me, potresti anche risolvere semplicemente secondo una mia vecchia idea espressa diverse altre volte ed adottata in un modo o nell'atro da diversi utenti:
1)– realizzare una pagina HTML extra, oppure una pagina senza applicare il modello, con il codice per immagine di sfondo con attributo "cover", oppure con slideshow tipo"maximage" come quello di Mirko, molto adatto allo scopo...
2)- attribuire all'Intestazione un'altezza fissa ed adeguata allo scopo; per esempio, se si volesse che alla risoluzione minima 480 avesse un'altezza di 240 pixel, questa sarebbe l'altezza da impostare per tutto il sito; ...cioè anche a 1280 o superiore l'altezza sarebbe sempre fissa a 240 px;
3)- le immagini da usare al p.1) devono essere con rapporto 2:1, quindi realizzate ad hoc in quanto la parte che avrà prevalenza sarà quella disposta sull'asse orizzontale centrale; ...per esempio 960x480, o 1200x600, e/o congrue;
4)- creare l'Intestazione vuota e con sfondo trasparente;
5)- usare il codice personalizzato al Passo_4 per un DIV_CUSTOM con larghezza al 100% e con altezza quella stessa dell'intestazione, 240 px, ed eventualmente assegnare l'attributo TOP adeguato alla posizione relativa dell'intestazione, per occuparne la medesima sezione;
6)- nel DIV_CUSTOM incorporare i codice IFRAME che importi la pagina cui p.1);
...
... è più semplice a farsi che a dirsi, ma di più non posso dirti in quanto mi sono espresso per memoria residua...
(... non dovresti incontrare difficoltà, e magari il mio interprete, che spesso ha gentilmente attuato quanto proponevo, potrebbe fornire il suo contributo...)

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Tommaso Tarallo
Tommaso Tarallo
User
Author

Grazie Kolasim, dovrei perdere un casino di tempo per qualche sito che faccio.... mi accontento delle possibilità del programma....

chiudo il post e grazie a tutti!

Read more
Posted on the from Tommaso Tarallo
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month RU

Giuseppe P.
... ... dovrei perdere un casino di tempo per qualche sito che faccio.... mi accontento delle possibilità del programma.... 

... nessuna perdita di tempo, basterebbero un paio di copia/incolla; ... comunque è sempre meglio usare le funzioni del programma come detto precedentemente, adattandovisi, e  che non si era capito se si era capito...

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪