1485 sujets

Web Mobile et responsive web design

Bonjour,

Quand je passes mon site sur smartphone, des bandeaux en dessous de mon footer et à droite de mon article apparaissent. Quand je change la couleur de BODY cela change la couleur de ce BACKGROUND. J'ai beau mettre des Width et Height 100%, cela ne change rien.
En faisant une inspection d'élément sur chrome, j'ai supprimé le padding de la classe .hentry
et j'ai vu que cela agrandissait cette zone en bas de mon footer.
Une idée pour résoudre et comprendre ce pb qui doit être simple comme bonjour ?

merci Smiley lol
Bonjour et bienvenue sur le forum, poupou94 Smiley smile

Le problème, c'est que sans constater/reproduire le bug, difficile de s'avancer…
Il faudrait au moins avoir une idée de la structure de ta page, idéalement l'URL de ton site.

À suivre Smiley smile
Bonjour,

Désolé, je ne réponds qu'aux demandes formulées sur le forum publiquement, ce qui permet de laisser une trace pour les suivants qui auraient par la suite le même problème que toi… c'est d'ailleurs un peu le but du forum Smiley cligne

A mon avis, tu as un problème avec un élément qui dépasse son conteneur, se qui crée une marge latérale droite en responsive…

J'ai bien compris que tu ne souhaite pas voir ce site référencé pour l'instant, mais alors tu n'as vraiment pas moyen d'enregistrer ta page d'accueil en une bête version statique et de mettre ça quelque part sur un serveur de test ou à un emplacement provisoire ?

À suivre Smiley cligne
C'est compréhensible. Voici mon url : -http://bit.ly/180W1KI

L'élément avec lequel je m'amuse :

.hentry {
padding: 40px 0;
}

Merci Smiley biggrin
Modifié par poupou94 (21 Apr 2015 - 15:22)
Ok, je viens de regarder vite fait, le problème vient de ta zone de navigation. Les éléments contenus dans #site-navigation dépassent de leur conteneur (à cause de divers positionnements relatifs/absolus ?).

On voit que la règle CSS suivant règle le problème visuellement. Cependant, ce n'est qu'un cache-misère parce qu'il faudrait trouver le ou les éléments qui posent problème pour vraiment le règler…

#site-navigation {
max-width: 100%;
overflow: hidden;
}

Je repasse plus tard regarder tout ça de plus prês Smiley cligne
Modifié par audrasjb (20 Apr 2015 - 15:20)
Ps : pour éviter que les moteurs de recherche ne suivent tes liens, tu devrais éditer tes posts pour placer un tiret devant les URL.
Exemple : -http://bit.ly/1bdiJSf
;)
Je ne comprends pas bien où tu places :

#site-navigation {
max-width: 100%;
overflow: hidden;
}

Je l'ai mis dans mon CUSTOM Css, cela n'a rien fait.

Je suis ensuite allée ds ma feuille de style et j'ai mis à jour :

.main-navigation {
clear: both;
margin: 0 auto;

max-width: 100%;
overflow: hidden;

min-height: 45px;
position: relative;
}

versus

.main-navigation {
clear: both;
margin: 0 auto;

max-width: 1080px;

min-height: 45px;
position: relative;
}

Étais ce cela qu'il fallait faire ? Sinon, peux tu me faire une capture d'écran du debugger pour comprendre où je dois insérer ce code ?

Merci Smiley biggol
Modifié par poupou94 (21 Apr 2015 - 15:23)
Cela vient peut être de mon footer.php que j'avais modifié pour enlever les copyright de wp.

<?php /** * The template for displaying the footer * * Contains footer content and the closing of the #main and #page div elements. * * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 */ ?> </div><!-- #main -->

<footer id="colophon" class="site-footer" role="contentinfo"> <?php get_sidebar( 'main' ); ?> <div class="site-info"> <?php do_action( 'twentythirteen_credits' ); ?>

Blablablablablabla

</div><!-- .site-info --> </footer><!-- #colophon --> </div><!-- #page --> <?php wp_footer(); ?> </body>
</html>