Un utente ha chiesto informazioni su GeneratePress di Wordpress

Intestazione CSS per cellulari e tablet?

Un utente ha chiesto 👇

Quindi sono completamente nuovo per wordpress, provando a modo mio.

Se guardo la mia intestazione su un laptop diligente, sono abbastanza soddisfatto del risultato d’ora in poi. Ma come posso assicurarmi che il CSS extra che ho usato per regolare la mia intestazione anche su desktop, mobile e tablet?

Ecco i codici che ho usato finora:

.site-header {
posizione: fissa;
in alto: 0;
larghezza: 100%;
z-index: 2000;
}

.container {
imbottitura in alto: 120px;
}

.site-header {
bordo inferiore: 3px solido # C0C0C0;
}

.inside-header {
imbottitura: 10px;
}

Ottimo per qualsiasi aiuto

Autore del tema

(@ edge22)

2 anni, 2 mesi fa

Ciao,

Tale codice dovrebbe essere applicato anche ai dispositivi mobili per impostazione predefinita.

Sembrano funzionare tutti per me 🙂

Lanciatore di thread

(@titosmucki)

2 anni, 2 mesi fa

Grazie per la risposta Tom.

Purtroppo quando guardo la pagina su un telefonino l’immagine frontale è per metà coperta dall’intestazione. Dovrebbe sembrare un tablet

Autore del tema

(@ edge22)

2 anni, 2 mesi fa

Dai una possibilità a questo SEC:

@media (max-width: 768px) {
    .site-header + * {
        margin-top: 150px;
    }
}

Lanciatore di thread

(@titosmucki)

2 anni, 2 mesi fa

Funziona perfettamente. Grazie Tom.

Ultima cosa: l’intestazione visualizzata su un telefono cellulare e tablet è troppo spessa. Sul desktop potrei ridurne le dimensioni usando CSS:

.inside-header {
imbottitura: 10px;
}

Cosa posso fare per cambiarlo anche su cellulare e tablet?

Autore del tema

(@ edge22)

2 anni, 2 mesi fa

Dai un colpo:

@media (max-width: 768px) {
    .inside-header {
        padding: 10px;
    }
}

Lanciatore di thread

(@titosmucki)

2 anni, 2 mesi fa

Hmmm … non meno davvero …

Autore del tema

(@ edge22)

2 anni, 2 mesi fa

Sì, perché la maggior parte dell’altezza è costituita dal logo e dal menu mobile.

La nostra opzione di intestazione mobile nella versione pro li mette online, il che aiuta a occupare meno spazio.

Sembra che il tuo sito abbia una pagina in arrivo a breve. Voglio ricordare se ha la navigazione mobile a destra o no sul desktop?

Fammi sapere 🙂

Lanciatore di thread

(@titosmucki)

2 anni, 2 mesi fa

Ho disabilitato il prossimo metodo di Tom a breve,
perfavore guarda. Penso che la navigazione mobile sia giusta? Se è questo che intendi …

Autore del tema

(@ edge22)

2 anni, 2 mesi fa

Prova ad aggiungere questo CSS:

@media (max-width: 768px) {
    #masthead {
        text-align: left;
    }

    #masthead .menu-toggle {
        position: absolute;
        top: 25px;
        right: 0;
        width: auto;
    }

    .inside-header {
        position: relative;
        padding-left: 20px;
    }

    .inside-navigation {
        position: static;
    }
}

Lanciatore di thread

(@titosmucki)

2 anni, 2 mesi fa

Grazie per il grande supporto Tom.
Lo apprezzo

Autore del tema

(@ edge22)

2 anni, 2 mesi fa

Sono contento di aver potuto aiutare 🙂

Was this helpful?

0 / 0

Lascia un commento 0

Your email address will not be published. Required fields are marked *