Le Blog de Linuxine

IT/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.

Écrire un commentaire