Creare header con 2 colonne: logo a sinistra e banner a destra

[allin81]

Si scusa, non si era disattivato il plugin che mostra la pagina in costruzione, ora dovrebbe andare

[ResianTaxidrive]

Credo che tu potresti decidere di usare (perlomeno quando la finestra è meno larga di un tot) una immagine diversa, più stretta.
Oppure, per basse risoluzioni, spostare i breadcrumbs sotto il pulsante. Quanto potrebbe essere lungo il breadcrumb?

[allin81]

Il breadcrumb potrebbe essere lungo al massimo quanto l'immagine, tipo 334 px (dipende dal nome dell'hotel quanto e' lungo).

L'idea era proprio quella di spostare il breadcrumbs sotto o sopra all'immagine, proprio come succede con il contenuto presente nella sidebar (che finisce sotto al testo quando si visualizza in modalità smartphone)

In ogni caso, l'immagine verde si restringe anche fino ad un certo punto.

Solo che non capisco come far posizionare i breadcrumbs sotto al pulsante...

[ResianTaxidrive]

Ci sono vari modi. Uno può essere che sotto un certo numero di pixel agisce la regola

div#breadcrumbs {

    float: none;

    margin-top: 15px;



}

[allin81]

una sorta di if else di php, giusto?
Tipo: se la risoluzione è minore di 200px mostra questo...

Solo che nei css come posso creare queste condizioni?

[ResianTaxidrive]

Dai un occhio alle media queries, servono a far eseguire le regole in determinate condizioni.
Nel tuo caso puoi scrivere ad esempio

@media (max-width: 600px) {
  div#breadcrumbs {
    float: none;
    margin-top: 15px;
 }
}

Questa regola verrà eseguita solo se la finestra del browser è più piccola di 600px

[allin81]

Grande !!
Perfetto, ho capito il funzionamento, infatti ho visto anche le media che erano in basso al foglio di stile del template che sto modificando.

Quindi posso solo aggiungere il margin-top e il float senza mettere anche le informazioni relative al font da usare, prende in automatico quelle impostate nella classe definita in precedenza, giusto?

Grazie dell'aiuto, hai risolto la metà dei miei problemi

[ResianTaxidrive]

Sì, valgono le regole definite in precedenza, ti basta ridefinire solo quelle che devono essere sovrascritte.

[allin81]

Perfetto, ti ringrazio

Quindi a sto punto potrei anche mostrare un logo diverso in base alla risoluzione scelta, seguendo sempre la stessa tecnica.

Ultima domanda e non do piu' fastidio, che tu sappia, per mostrare questa modifica su tutti gli smartphone, imposto la regola a 400px o a qualcosina in meno?

[ResianTaxidrive]

Sì puoi mostrare anche un logo diverso, purchè il logo tu lo mostri tramite background-image. Se è inserito nell'html, ti conviene regolare in percentuale la width dell'immagine/logo.

Non è sempre facile stabilire la dimensione minima, 320px potrebbe essere un valore.
Ma se già a 400px noti che gli oggetti non ti stanno più allora metti quel valore.
Potresti provare a ridimensionare la finestra del browser e vedere a che dimensione della finestra gli oggetti non ti stanno più. (Potresti aver bisogno di aggiungere un add-on nel browser per vedere la dimensione in px della finestra, io per Firefox uso Firesizer)