Rendre un thème Wordpress responsive
11 février 2020 Rédigé par Linuxine
Pour qu'un thème Wordpress soit responsive, il faut éviter que les tailles ne soit définies en dur : au lieu de :
#content{ width:700px; }
préferer :
#content{ max-width: 700px; width: 100%; }
On peut également inclure des requêtes média, pour modifier l'affichage selon la taille de l'écran. Exemple pour blog.linuxine.net :
/*Responsive media queries*/ @media screen and ( max-width: 800px ) { #header { width: 100%; } #logos { clear: both; display: block; float: left; margin-left: 20px width: 100%; } #social_icons { display:none; } #content { clear: both; display: block; width: 100%; } #sidebar{ display:none; } }
/! Ne pas oublier d'inclure dans le header
Sinon les media queries ne sont pas executées ; le initial-scale est indispensable pour un affichage correct sous Opera mobile.