WordPress : Rembourrage de site CSS indésirable dans Tablet & Mobile

J’ai créé ce site à partir d’un PSD, tous des CSS relativement élémentaires. J’ai un rembourrage extérieur indésirable sur un appareil mobile ET une tablette. Je veux que les bords gauche et droit du site soient alignés avec les bords du navigateur. C’est environ 20 pixels de rembourrage indésirable.

Veuillez consulter mon site de développement : http://america.82ndmedia.com/

J’ai testé la suppression de la « marge : 0 auto » du conteneur div et cela le corrige… mais j’en ai besoin pour qu’il fonctionne sur un bureau.

.container {
width: $w_total;
margin: 0 auto;
}

Tous les conseils seraient grandement appréciés. Merci!

Solution n°1 trouvée

Je recommanderais d’utiliser des pourcentages au lieu de pixels car votre configuration actuelle ne fonctionnera pas et est difficile à maintenir en utilisant des pixels codés en dur pour une conception réactive .

Par exemple, vous avez votre wrapper principal div class="container"défini sur a max-widthof 717pxsur des écrans plus petits (ce qui semble aléatoire) , mais à l’intérieur, vous avez des éléments tels que id="blog"set to a widthof 1020px, qui ne conviendront évidemment pas.

Si vous définissez ces éléments internes sur des pourcentages de leur conteneur externe, il sera beaucoup plus facile de le faire fonctionner et il sera vraiment réactif ou fluide .

Solution n°2 trouvée

Ceci est causé par la règle :

@media (max-width: 450px) {
   .header, .columns > .sidebar, .post_box, .prev_next, .comments_intro,
   .comment, .comment_nav, #commentform, .comment_form_title, .footer {
       padding-right: 13px;
       padding-left: 13px;
}

Supprimez ou remplacez cette règle d’une manière ou d’une autre.