Modificare layout sito mobile con CSS

21 Set 2018 - Wordpress


Modificare layout sito mobile con CSS

Usare i CSS per modificare layout grafico del sito su mobile e tra punti di interruzione differenti

Oggi vedremo come modificare il layout di un sito web con i CSS andando a scegliere i punti di interruzione.

Vi sarà sicuramente capitato di aver acquistato un tema wordpress, o un layout html, e questo quando si visualizza da dispositivo mobile o da tablet risulta con margini troppo accentuati oppure tutto scombinato…

Esiste un escamotage semplice, fondamentalmente, ma richiede l’uso di CSS, quindi dovete essere almeno un pò pratici del linguaggio per poterlo fare. Detto questo passiamo alla pratica.

Perché modificare il layout di un sito web, o di una pagina, con i css?

La risposta è molto semplice:

Perché grazie all’utilizzo di piccoli codici Css, è possibile modificare anche drasticamente, un layout intero senza dover andare a toccare il codice del tema scelto.

è sufficiente utilizzare la sezione che mette a disposizione WordPress accedibile tramite il menù Aspetto > Personalizza > Modifica il codice CSS.

Se volete cambiare il colore del testo solo in visualizzazione mobile, ad esempio h1, il comando da utilizzare è semplice, basta usare una Query specifica ovvero:

@media only screen and (max-width: 450px) {
h1 {color: #303030;}
}

.. o ancora più semplicemente:

@media (max-width: 450px) {
h1 {color: #303030;}
}

Niente di più semplice.
Potete usare, al posto di max-width anche min-width.
É possibile utilizzare questa tecnica anche solo per modificare la dimensione del testo, che da smartphone potrebbe risultare troppo piccola o troppo grande.

@media only screen and (max-width: 450px) {
h1 {font-size: 1.2rem; font-weight:300; line-height:19px;}
}

Modifiche al layout tra punti di interruzione

Se nel primo esempio abbiamo usato il max-width per riferirci a tutte le risoluzioni da 1px a 480px, possiamo anche modificare un semplice range di pixel, ad esempio tra 350px e 768px che è rispettivamente il range che va dalla risoluzione dello smartphone al tablet (escluso ipad pro che ha una risoluzione di 1024px come un Netbook)
di seguito la query:

@media screen and (min-width: 350px) and (max-width: 768px){
h1 {color: #303030;}
}

I punti di interruzione web comuni sono

  • 350px – Smartphone con schermo più piccolo
  • 480px – Smartphone con schermo più grande
  • 768px – Tablet
  • 1024px – Netbook o iPad pro
  • 1200px – Notebook o schermi 15″
  • 1600px – Schermi 17″
  • 1980px – Schermi 21″
  • 2560px – Schermi oltre 21″

Entrando ancora di più nello specifico è possibile non solo cambiare classi css per specifiche grandezze di schermi, ma anche per pagine specifiche, ad esempio solo la pagina principale del blog, o degli articoli generici, o addirittura di pagine e articoli specifici: vedi l’articolo correlato “360smartweb – Modificare il css di una pagina singola

Conclusioni:

Con un po’ di esperienza, con un po’ di pratica e con la voglia di imparare, anche se avete acquistato un tema che fa un po’ i “capricci” con il layout che avete creato, si può andare a modificare nel 90% dei casi, correggendo gli errori che i programmatori hanno commesso.

Se avete dubbi, richieste o volete semplicemente far fare a noi il lavoro che non riuscite a modificare, scrivete nei commenti o contattateci per un preventivo gratuito

POST CORRELATI

Massimiliano Piacentini

Proprietario di 360Smartweb

Dopo vari anni passati come graphic designer e dopo molti corsi, ho seguito la mia massima passione: lo sviluppo di siti web in html, php e WordPress. Il design web è stata una semplice conseguenza di tutte le mie skills che mi permettono, seguendo le best practices, per dare una User Experience sui siti creati.