html, mostrare un elemento solo sulla versione mobile

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 paso 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.


Graziano De Maio

Consulente Seo e Web Designer, si occupa di creazione siti e portali dinamici con Joomla e Wordpress, Restyling e revamp siti esistenti, Social media marketing, strategie di posizionamento sui motori di ricerca. Creazione di Sales Funnel e UX.

Gdmtech

Via Stefanardo da Vimercate 28
20128 Milano (MI) - Italy

Philosofy

I nostri clienti sono aziende e professionisti che vogliono sfruttare Internet per trovare nuovi clienti, aumentare i loro contatti, vendere i loro servizi e prodotti. Oltre alle normali attività di Web Design siamo  specialisti SEO e Digital Marketing. Ci occupiamo di corsi di web marketing in azienda, sviluppo di e-commerce con Opencart e Prestashop e Woocommerce, siti web in Wordpress e Joomla, migrazioni.

Gdmtech - Web&Seo Agency Milano

Gdmtech Google Review