Una delle cose che non dovrebbe mancare sul vostro tema che avete installato sul vostro sito o blog su wordpress o su altra piattaforma nel caso non abbiate la versione mobile è la possibilità di offrire diversi CSS in base alla risoluzione dello schermo che l’utente utilizza per navigare su internet…
Oggi giorno questa operazione non è sicuramente semplice visto la quantità di dispositivi disponibili sul mercato. A mio avviso oggi giorno offrire una soluzione responsive del vostro tema è la miglior soluzione soprattutto nel caso di un blog di tecnologia visto che smartphone e tablet rappresentano una bella fetta del traffico.
Fatta questa introduzione, oggi non voglio insegnarvi come fare da zero un tema responsive visto che non ne sarei in grado, ma voglio riportarvi questa mia esperienza che può tornare utile a chi ha installato un tema responsive ma che durante lo sviluppo non è stato sviluppato alla perfezione.
Nel mio caso immagini e video di Youtube o di altri servizi che prevedono l’incorporamento dei video tramite iframe, object o embed non venivano ridimensionati correttamente… anzi non venivano per niente ridimensionati perchè nel CSS responsive mancava una parte di codice che vi riporto qui a seguire.
Codice CSS da aggiungere per le immagini:
/* Images */
.entry-content img,
.comment-content img,
.widget img {
max-width: 97.5%;
/* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"] {
height: auto;
/* Make sure images with WordPress-added height and width attributes are scaled correctly */
}
img.size-full {
max-width: 97.5%;
width: auto;
/* Prevent stretching of full-size images with height and width attributes in IE8 */
} Codice CSS per l’incorporamento dei video:
/* Make sure embeds and iframes fit their containers */
embed,
iframe,
object {
max-width: 100%;
max-height: 70%;
} La parte delle immagini è stata facile da reperire visto che è già presente all’interno del tema di default in HTML5 che WordPress mette a disposizione come base, mentre per i video devo dire che le guide presenti che ho trovato non sono state di grosso aiuto perchè la maggior parte uguali e non adatte per chi ha un blog già avviato con tanti incorporamenti visto che si doveva creare una classe apposita da applicare su ogni singolo video.
Con il metodo che ho potuto trovare quasi per fortuna su un template wordpress gratuito invece il tutto risulta essere più semplice.
Concludo consigliandovi questa lettura e di provare a testare il vostro CSS responsive su più dispositivi per vedere se il vostro template risponde correttamente.
