Nascondere elementi su smartphone WordPress CSS è utile quando un sito mostra menu, banner, immagini o blocchi che occupano troppo spazio sui display piccoli. Una media query CSS consente di applicare la regola soltanto sotto una determinata larghezza, lasciando invariata la visualizzazione su computer e tablet. L’approccio più sicuro consiste nell’assegnare una classe CSS specifica all’elemento da rimuovere e nel nasconderlo con display: none. La procedura funziona con l’Editor a blocchi di WordPress, con molti temi classici e con diversi page builder. Prima di pubblicare la modifica è importante verificare il risultato su un dispositivo reale e controllare che il contenuto nascosto non sia indispensabile per la navigazione.

Come assegnare una classe CSS all’elemento da nascondere

Per nascondere un elemento soltanto su smartphone bisogna prima identificarlo con una classe dedicata. Una classe mirata evita di applicare la regola a tutti i paragrafi, a tutte le immagini o a tutti i pulsanti presenti nella pagina.

Con l’Editor a blocchi di WordPress, apri la pagina o l’articolo interessato e seleziona il blocco da modificare. Nel pannello laterale apri la sezione Avanzate, quindi inserisci il nome della classe nel campo Classe CSS aggiuntiva. Usa un nome semplice, senza spazi e senza il punto iniziale, per esempio:

nascondi-su-smartphone

Il punto viene aggiunto soltanto nel foglio di stile. Nel campo di WordPress devi quindi scrivere nascondi-su-smartphone, mentre nel CSS userai .nascondi-su-smartphone.

La classe può essere applicata a diversi elementi, tra cui:

Un blocco Immagine o Galleria.
Un paragrafo, un titolo o un gruppo di blocchi.
Un pulsante o una barra promozionale.
Un widget del tema, se il tema permette di inserire classi personalizzate.
Una sezione o una colonna creata con un page builder.

È preferibile assegnare la classe al contenitore completo quando vuoi nascondere un’intera sezione. Se la classe viene applicata solo a un’immagine interna, il titolo o lo spazio del contenitore potrebbero rimanere visibili.

Come inserire la media query CSS in WordPress

Il codice CSS può essere inserito nell’area CSS aggiuntivo del personalizzatore oppure nell’editor del tema, se il tema e il servizio di hosting lo consentono. La posizione esatta cambia in base alla configurazione di WordPress.

Passo 1: aprire CSS aggiuntivo

Nei temi classici, accedi alla bacheca di WordPress e apri Aspetto > Personalizza > CSS aggiuntivo. Incolla il codice nell’area disponibile e usa il pulsante di pubblicazione.

Nei temi a blocchi, il percorso può essere diverso. In molti casi puoi aprire Aspetto > Editor, selezionare Stili, aprire il menu con i tre punti e cercare l’area relativa al CSS aggiuntivo. Alcuni temi a blocchi non espongono questa funzione direttamente: in quel caso può essere necessario usare un plugin per il CSS personalizzato o il campo previsto dal tema.

Passo 2: inserire la regola per smartphone

La media query seguente nasconde gli elementi con la classe nascondi-su-smartphone quando la finestra del browser è larga al massimo 767 pixel:

@media screen and (max-width: 767px) {
.nascondi-su-smartphone {
display: none;
}
}

La proprietà display: none rimuove l’elemento dal layout della pagina. Il contenuto non occupa spazio e gli elementi successivi si spostano automaticamente, senza lasciare un’area vuota.

Il valore 767px non rappresenta una regola universale per tutti i siti. È una soglia comune, ma il punto corretto dipende dalla struttura del tema, dalle colonne e dalla larghezza alla quale il layout cambia. Se il contenuto deve sparire quando il tema passa alla disposizione mobile a 768 pixel, la media query può usare max-width: 768px.

Per mostrare un elemento sul desktop e nasconderlo soltanto su smartphone non servono regole aggiuntive. La classe resta priva di effetti sopra la soglia indicata e viene modificata solo all’interno della media query.

Come gestire più elementi e conflitti di stile

Puoi usare la stessa classe per nascondere più elementi indipendenti. Aggiungi nascondi-su-smartphone a ogni blocco interessato e mantieni una sola regola CSS:

@media screen and (max-width: 767px) {
.nascondi-su-smartphone {
display: none !important;
}
}

L’uso di !important non dovrebbe essere la prima scelta, perché rende più difficile sovrascrivere la regola in seguito. Può essere utile quando il tema o il page builder assegna all’elemento una proprietà display con una specificità maggiore, come display: flex o display: block.

Quando possibile, prova prima la versione senza !important:

@media screen and (max-width: 767px) {
.nascondi-su-smartphone {
display: none;
}
}

Se il blocco continua a essere visibile, controlla che la classe sia stata scritta correttamente e che il CSS sia stato pubblicato. Verifica anche la cache del plugin, del server o della rete di distribuzione dei contenuti: una copia precedente del foglio di stile può impedire di vedere subito la modifica.

In presenza di selettori molto specifici, puoi aumentare la precisione senza applicare !important a tutto il foglio. Per esempio:

@media screen and (max-width: 767px) {
.wp-site-blocks .nascondi-su-smartphone {
display: none;
}
}

Il selettore .wp-site-blocks è legato alla struttura di molti temi a blocchi, ma non è presente in ogni tema WordPress. Usa gli strumenti per sviluppatori del browser per controllare le classi realmente generate dal sito prima di copiare selettori più complessi.

Come verificare il risultato su smartphone

Dopo aver pubblicato il CSS, apri la pagina in modalità privata o svuota la cache del browser. Ridimensiona la finestra del browser sotto la soglia scelta e controlla che l’elemento scompaia senza compromettere il resto del layout.

La verifica dovrebbe includere anche:

Un dispositivo Android e un iPhone, quando il sito è rivolto a entrambi.
La visualizzazione verticale e orizzontale dello smartphone.
Il menu di navigazione e i pulsanti principali.
Il caricamento della pagina con cache attiva.
L’eventuale presenza di spazio vuoto, margini o contenitori rimasti visibili.

Nascondere un elemento con display: none lo elimina anche dalla struttura accessibile interpretata dalle tecnologie assistive. Non usare quindi questa tecnica per rimuovere informazioni essenziali, avvisi legali, dati di contatto indispensabili o controlli necessari per completare un’azione.

Se vuoi solo ridurre l’impatto visivo senza rimuovere il contenuto, valuta una modifica delle dimensioni, dei margini o dell’ordine degli elementi tramite CSS responsive. La scelta dipende dall’obiettivo: display: none nasconde davvero il blocco, mentre una modifica grafica lo mantiene disponibile nella pagina.

Per separare più comportamenti puoi creare classi diverse, ad esempio nascondi-banner-smartphone e nascondi-sidebar-smartphone. Classi con nomi specifici rendono il foglio CSS più leggibile e riducono il rischio di nascondere accidentalmente elementi aggiunti in futuro.

La tecnica per nascondere elementi su smartphone WordPress CSS funziona meglio quando ogni blocco ha una classe dedicata e una media query verificata sul layout reale.

Potrebbe interessarti anche:

FAQ

Sì. Assegna al blocco una classe CSS personalizzata e applica display: none dentro una media query con max-width, per esempio 767 pixel.

Nei temi classici il percorso più comune è Aspetto > Personalizza > CSS aggiuntivo. Nei temi a blocchi la posizione può trovarsi nell’Editor del sito oppure dipendere dal tema utilizzato.

No. Nel campo di WordPress scrivi il nome senza punto, come nascondi-su-smartphone. Nel foglio CSS il selettore deve invece iniziare con ., quindi .nascondi-su-smartphone.

Controlla la classe, la soglia della media query e la cache di WordPress. Se il tema sovrascrive display: none, può essere necessario aumentare la specificità del selettore o usare !important con cautela.

No. display: none impedisce la visualizzazione, ma l’elemento può essere comunque scaricato dal browser, soprattutto se si tratta di un’immagine o di una risorsa esterna.

Altri articoli di questa serie: