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.

Ti auguro buona lettura e mi raccomando, se dopo aver letto questo articolo hai bisogno di aiuto non esitare a contattarmi.

Autore: Graziano De Maio | Titolare di Gdmtech