Les widgets de pied de page CSS wordpress s’empilent lorsque la page est redimensionnée

J’utilise WordPress, thème enfant Twenty Eleven.

J’ai eu un problème où tous mes divs se sont déplacés lorsque j’ai redimensionné la page. Après avoir persévéré, j’ai réussi à m’en sortir en ajoutant un wrapper autour de mon balisage html corporel. Cela a arrêté toutes les divs en mouvement lorsque la page a été redimensionnée.

#site-wrapper{margin: auto; margin: auto; width: 1000px;}

Cependant, j’ai ajouté cinq zones de widgets qui traversent mon pied de page

Un | deux | trois | quatre | cinq

Mais lorsque la page est redimensionnée, les zones du widget s’empilent les unes sur les autres

Une

Deux

Trois

Quatre

Cinq

Tout le reste s’affiche correctement. J’ai essayé d’ajouter un wrapper autour du pied de page avec { margin: auto; marge : automatique ; largeur : 1 000 pixels ; }, cela n’a pas fonctionné, les widgets s’empilent toujours. J’ai également essayé de positionner les éléments relatifs/absolus par rapport aux éléments de widget eux-mêmes et à l’emballage sans succès. Je pense que ça a quelque chose à voir avec

    float: left;

sur les éléments du widget, mais je ne vois pas comment contourner cela ? J’espère que quelqu’un pourra me guider dans la bonne direction!

Merci d’avance, mon CSS ci-dessous pour l’élément widget est ci-dessous

/* Footer Widget Areas */
#supplementary {
border-top: none;
width: 80%;
padding: 1.625em 7.6%;
overflow: hidden;
}

/* Three Footer Widget Areas */
#supplementary.two .widget-area {
float: left;
margin-right: 2.7%;
width: 17.78%;
}
#supplementary.two .widget-area + .widget-area {
margin-right: 0;
}

/* Three Footer Widget Areas */
#supplementary.three .widget-area {
float: left;
margin-right: 2.7%;
width: 22.18%;
}
#supplementary.three .widget-area + .widget-area + .widget-area {
margin-right: 0;
}

#supplementary.four .widget-area{
float: left;
margin-right: 3.7%;
width: 22.18%;
}

#supplementary.four .widget-area + .widget-area + .widget-area {
margin-right: 0;
}

#supplementary.five .widget-area{
float: left;
margin-right: 2.9%;
width: 16.7%;
}

#supplementary.five .widget-area + .widget-area + .widget-area + .widget-area +   .widget-area+ .widget-area{
margin-right: 0;
}

Solution n°1 trouvée

Ce n’est pas un bug. C’est par conception . WordPress 2011 est un thème réactif destiné à bien paraître sur n’importe quel appareil de taille. Les petits appareils n’ont pas d’espace pour afficher les widgets à côté du contenu principal, donc ce thème, ainsi que la plupart des autres thèmes réactifs, les déplace sous le contenu principal sur les petits écrans.

Remplacer cette fonctionnalité semble incroyablement contre-intuitif. Si vous ne voulez vraiment pas d’un design réactif (et de nos jours, vous devriez en vouloir un), vous devriez probablement opter pour un thème parent qui n’est pas réactif.

Solution n°2 trouvée

La première chose que j’ai vue, c’est que cette ligne de code

site-wrapper{marge : auto ; marge : automatique ; largeur : 1000px ;}

doit être

site-wrapper{marge : 0 auto ; largeur : 1000px ;}

la prochaine chose à essayer est d’utiliser des pourcentages entiers, les navigateurs n’aiment pas les fractions et à la place ils ont tendance à arrondir… essayez d’ajuster la largeur aux nombres entiers dont la somme est égale ou inférieure à 100.