Visualizzare un elemento di un sito web solo sulla versione Mobile in 2 passaggi

Veniamo al sodo, supponiamo vi serva mostrare un elemento del vostro sito web solo nella versione mobile. Ad esempio io voglio che nella pagina contatti, se l’utente sta navigando da Smartphone, veda come primo elemento in alto il bottone per far partire il Navigatore di Google. Mentre se si trova da Desktop voglio che non si veda.

Ecco come fare passo passo per nascondere un elemento su desktop e mostrarlo solo sulla versione mobile:

1. Per prima cosa date all’elemento che va visualizzato solo sul mobile html (un Div, un P, uno Span) una class CSS, ad esempio .solomobile.
2. Poi inserite nel vostro file degli stili CSS questo sneippet di codice:

.solomobile { 
 display:none; 
 }
@media screen and (max-width: 500px) {
 .solomobile { 
 display:block; }
 }

Fine! Ora provate e tutto dovrebbe funzionare.

Autore: Graziano De Maio

Web developer e SEO specilalist. Sono un consulente Seo – Web designer – Creo e fornisco assistenza su siti con Joomla e WordPress, sviluppo ecommerce con Woocommerce. Svolgo corsi Seo, Web Marketing, Joomla e WordPress di gruppo e one-to-one in azienda.