Grande marge a droite de mon site sur mobile

Bonjour,
comment allez-vous les ami(e)s j'ai un souci avec mon site sur mobile http://www.netteroyale.com
il y a une grande marge à droite que je ne comprend pas j'ai essayé de réduire les chose mais elle persiste alors je viens demander votre aide

Salut,

Si tu veux centrer le contenu dans ta page tu peux modifier les propriétés de #toutlesite dans ton CSS :

#toutlesite {
  width: 940px;
  box-shadow: 0px 0px 5px black;
  margin: 0;
  background-color: white;
  margin: 0 auto; /*c'est ici que se fait le centrage*/
}

Sghislain a écrit :
Bonjour,
comment allez-vous les ami(e)s j'ai un souci avec mon site sur mobile http://www.netteroyale.com
il y a une grande marge à droite que je ne comprend pas j'ai essayé de réduire les chose mais elle persiste alors je viens demander votre aide

C'est fou de pas dire merci un minimum.... surtout si on est tes ami(e)s. ça prend 15 secondes max.. t'a le temps de faire la modif mais pas de remercier les personnes qui t'aident, bien que si la personne aide par volontariat ce n'est pas un merci qu'elle attend je trouve cela déplacé de pas donner des nouvelles de l'évolution du problème...
Modifié par JENCAL (23 Mar 2016 - 13:37)

MathieuR meme quand je fais ces modifications, la marge est toujours présente sur mobile. or le site devrait être center je ne comprend pas pourquoi

voici mon CSS

@charset "utf-8";
/* CSS Document */
body{margin:0px; padding:0px;}
*{margin:0px; padding:0px;}
*{padding:0px; margin:0px;font-size:14px; font:"Trebuchet MS", Arial, Helvetica, sans-serif;}
.h1
{color: #FFF; font-size:18px; font-weight:normal; font-family:Arial, Helvetica, sans-serif;}

@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400;
  src: local('Cabin Regular'), local('Cabin-Regular'), url(fonts/cabin-regular.woff) format('woff');
}
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 600;
  src: local('Cabin SemiBold'), local('Cabin-SemiBold'), url(fonts/cabin-semiBold.woff) format('woff');
}
@font-face {
  font-family: 'Cabin';
  font-style: italic;
  font-weight: 400;
  src: local('Cabin Italic'), local('Cabin-Italic'), url(fonts/cabin-italic.woff) format('woff');
}
@font-face {
  font-family: 'Viga';
  font-style: normal;
  font-weight: 400;
  src: local('Viga-Regular'), url(fonts/viga.woff) format('woff');
}
*{padding:0px; margin:0px;font-size:13px; font-family:Cabin;}

/***@media queries***/

/***fin @media queries***/



/******Menu de navigation*******/
	
	nav a
	{
		text-decoration:none;
		font-weight:bold;
		text-transform: uppercase;
		color:#928d8d;
		font-size:13px;
		
	}
	nav{
		text-align: center;
		padding: 10px;
		margin: 5px;
	}
	nav .accueil{border-right:1px solid #009933; border-bottom:5px solid #009933;}
	nav .realisations{border-right:1px solid #00A2A5; border-bottom:5px solid #00A2A5;}
	nav .rechercher{border-right:1px solid #405953; border-bottom:5px solid #405953;}
	nav .contact{border-right:1px solid #88A725; border-bottom:5px solid #88A725;}
	
	nav ul
	{
		text-align:left;
		margin:23px;
		list-style:none;
		margin-top:100px;	
	}
	
	nav li
	{
		font-size:18px;
		text-align: center;
		display: inline-block;
		position: fixed;
		position:relative;
		margin:0 20px;
	}
	
	
	nav ul li
	{
		padding:7px;
		font-size:14px;
		text-align: left;
		display:inherit;
	}
	
	nav ul
	{
		position:absolute;
		max-height:0;
		margin-top:7px;
		overflow:hidden;
		z-index:9999;
		-moz-transition-duration: 0.9s; 
		-ms-transition-duration: 0.9s; 
		-o-transition-duration: 0.9s; 
		-webkit-transition-duration: 0.9s; 
		transition-duration: 0.9s;
		-webkit-border-radius: 4px;
	  	-moz-border-radius: 4px;
	  	border-radius: 4px;

	}

	nav a:active {
    color: #1e7d0b;
}
	
	nav li ul:hover
	{
		color:#b60c0c;
		text-decoration:none;
	}
	
	nav li :hover
	{

		text-decoration:none;
		color:#b60c0c;
	}
	
	nav li:hover ul
	{
		max-height:10em;
		margin-top:10px;
		padding:2px;
		margin-left:-39px;
			
	}
	

	
	/* background des sous menus */
	
	nav li ul:nth-child(2) li
	{
		background:#e6e6e6 no-repeat ;
		-moz-box-shadow: 1px 1px 2px #000;
   		-webkit-box-shadow: 1px 1px 2px #000;
		-ms-box-shadow: 1px 1px 2px #000;
		-o-box-shadow: 1px 1px 2px #000;
		box-shadow: 1px 1px 2px #000;
		width:140px;
	}

	/*fin background des sous menu*/
	
	
/******Fin menu d navigation*******/


.viga{font-family:Viga;}

.clearfix { *zoom: 1 }
.clearfix:before, .clearfix:after {display: table;content: "";line-height: 0;}
.clearfix:after {clear: both;}
.table{display:table; width:inherit;}
.table-row{display:table-row;}
.table-cell{display:table-cell; vertical-align:top;}

#designfooter{border: none; border-style: none;}
#designfooter img{ width:940px; border: none; border-style: none;}
#sociaux{margin: 5px; float: right; border: none; border-style: none; cursor: pointer;}
#sociaux a:hover{opacity:0.4;}
#sociaux img{text-decoration: none; border: none; border-style: none;}
#sliderb_container{position: relative; width: 940px;height: 330px; overflow: hidden;}
.videocontainer{display:inline-block; margin-left: 5px; margin-right: 5px; margin-top:22px; width:300px; box-shadow: 1px 1px 12px #555;}

#toutlesite{width:940px;box-shadow:0px 0px 5px black;margin:0 auto; margin-top:2px;background-color:white;}
#sitebas{width:940px; background-color: #EDEDED; box-shadow:0px 0px 5px black;margin:0 auto;}


/*enveloppe flotante*/
#contact-box{position: absolute;left:10px;}
#btnContact {background: #b60c0c; margin-left: 0 auto; padding: 15px; cursor: pointer;border-bottom-left-radius:5px;border-top-left-radius:5px;} 
#frmContact {background:#FAF8F8;padding:15px;display:none;float:right;}
#frmContact div{margin-bottom: 15px}
#frmContact div label{margin-left: 5px}
.demoInputBox{padding:10px; border:#F0F0F0 1px solid; border-radius:4px;}
.error{background-color: #FF6600;border:#AA4502 1px solid;padding: 5px 10px;color: #FFFFFF;border-radius:4px;}
.success{background-color: #12CC1A;border:#0FA015 1px solid;padding: 5px 10px;color: #FFFFFF;border-radius:4px;}
.info{font-size:.8em;color: #FF6600;letter-spacing:2px;padding-left:5px;}
.btnAction{background-color:#182153;border:0;padding:5px 0px;color:#FFF; font-weight: bold; border:#F0F0F0 1px solid; border-radius:4px;}
.txt-content{border-left: #F0F0F0 1px solid;padding: 5px 20px; margin-top: 100px;}
/*fin*/

#formulaire{float:right; width:560px;margin-left:60px;}

#position_connect_bg{width:550px; height:150px; background-image:url(../images/back2.png);}
#position{margin-top:500px;}
#saisie .inputs input[type=text]{font-weight:bold; font-size: 14px; width:150px; border-radius: 3px; border:2px solid #182153; padding: 4px 4px;  margin-bottom: 10px; box-shadow: 0px 0px 5px  #182153; background-image:url(images/icones/required_icon.png); background-repeat:no-repeat; background-position:right;}

#saisie .inputs input[type=text]:focus{font-size: 14px; width:200px; border-radius: 3px; border:2px solid #167821; padding: 4px 4px;  margin-bottom: 10px; box-shadow: 0px 0px 5px #167821; background-image:url(../images/icones/b_drop.png); background-size:10px; background-repeat:no-repeat; background-position:right; transition-duration:0.4s;}

#saisie .inputs input[type=text]:valid{background-image:url(../images/icones/valid.png);  border:2px solid #167821; background-repeat:no-repeat; background-position:right; box-shadow: 0px 0px 5px #167821;}

input[type=submit]{width:80px; height:30px; color:hsl(0,0%,100%); text-align:center; border-radius:3px; background-color:#182153; border:none;}

input[type=submit]:hover{width:100px; font-size:14px; font-weight:bold; transition-duration:0.7s; border-radius:3px; background-color:#167821; border:none; background-image:url(../images/icones/valid.png); background-repeat:no-repeat; background-position:right;}



/*Mmise en forme du pied de page*/
footer{line-height:30px;}
footer #bandebleue{background-color:#f8f8f8;padding:0px;}
footer #bandegrise{background-color:#c6c7bf;height:50px;padding-top:0px;}


/**@media queries**/

@media screen and (min-width: 844px) and (max-width: 1044px) {


}


@media screen and (min-width: 1224px) {


}


@media screen and (min-width: 844px) and (max-width: 1024px) {
	#toutlesite{width: auto; margin:0px; padding:0px;}
    #sliderb_container{display: none;}
    .videocontainer{border:1px solid #61a0f5; text-align: center; width: auto; background-color: white; margin: 17px; margin: 15px 5px 5px 5px; padding:5px 15px 5px 15px; box-shadow: 1px 1px 12px #555; }
    #slideshow{display: none;}
    #slideshow img{width: 100%;}
    .ln1{display: none;}
    #bandegrise{float: left;}
    #designfooter{float: left;}
    #designfooter img{width: 98%;}
    header img{width:20%;}
    .redbande{width: auto;}
    #footer{width: 100%;}
    .moovie img{margin: 3px 3px 3px 3px; padding:3px 3px 3px 3px;}
    body{width: auto; margin : 0; padding : 0}
    iframe{ margin: 5px 20px 20px 15px; padding:20px 20px 20px 5px;}

    nav li
    {
        padding-bottom: 0;
        margin: auto;

    }

    nav a
    {color: #b60c0c;}
    	
    nav
	{
       display:inline-block;/* La valeur par défaut */
        padding-bottom: 0;
        margin: auto;
    }
    
    nav ul 
	{
        margin-top: 0;
    }

}

@media screen and (max-width: 844px) {
    #toutlesite{width: auto; margin:0px; padding:0px;}
    #sliderb_container{display: none;}
    .videocontainer{border:1px solid gray; width: auto; text-align: center; background-color: white; margin: 17px; margin: 15px 5 5 5px; padding:5 15 5 15px; box-shadow: 1px 1px 12px #555; }
    #slideshow{display: none;}
    #slideshow img{display: none;}
    .ln1{display: none;}
    #bandegrise{float: left;}
    #designfooter{float: left;}
    #designfooter img{display: none;}
    header img{width:10%;}
    .redbande{width: auto;}
    #footer{width: 100%;}
    .moovie img{margin: 3px 3px 3px 3px; padding:3px 3px 3px 3px;}
    body{width : auto;margin : 0;padding : 0;}
    iframe{ margin: 5px 10 10 15px; padding:15 5 10 5px;}

    nav li
    {
        padding-bottom: 0;
        margin: auto;

    }

    nav a
    {color: #61a0f5;}
    	
    nav
	{
       display:inline-block;/* La valeur par défaut */
        padding-bottom: 0;
        margin: auto;
    }
    
    nav ul 
	{
        margin-top: 0;
    }
}

@media (max-device-width:844px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
  }
}

/**@media queries**/

mon HTML

<?php require_once('includes/incfiles/header.inc.php');?>
<body>

	<div id="toutlesite">
		<header>
			<div id="sociaux">
				<a href="https://www.facebook.com/nette.royale?fref=ts"><img src="<?php echo $URL;?>images/icones/icon-fcbk.png" alt="Facebook icône" width="30"/></a>
				<a href="http://www.twitter.com/netteroyale"><img src="<?php echo $URL;?>images/icones/icon-twitter.png" alt="Twitter icône" width="30"/></a>
				<a href="https://www.youtube.com/channel/UCxr9Xg6EO9xp2_GuIghJOJg"><img src="<?php echo $URL;?>images/icones/icon-youtube.png" alt="Youtube icône" width="30"/></a>
			</div>
			<?php require_once('includes/incfiles/navbar.inc.php') ;?>
		</header>

		<?php require_once('includes/incfiles/siteslide.inc.php') ;?><br/>
		<div id="contenu">
		<div style="background-color:#fff; height:1px; width:940px;"></div><br/>
		<?php 	
			require_once('includes/incfiles/connexion.inc.php');
			$req=mysql_query("SELECT * FROM clip WHERE alaune='oui' and active='oui' ORDER BY id DESC LIMIT 6");
			$req2=mysql_query("SELECT * FROM clip WHERE active='oui' and alaune='non' ORDER BY vue LIMIT 30");
 
		;?>

			<div class="redbande" style="background-color:#b60c0c; color:white; width:auto;"><b style="margin: 5px 5px 5px 5px; padding:0 5 0 5px; font-size:18px; font-weight:bold; text-transform:uppercase;">Vidéos a la une</b></div><br/>
		  	<?php while($resultat=mysql_fetch_array($req)){   
    		?>

				   	<div class="videocontainer">
				        <p class="moovie" style="margin: 5px 0 0 0px; padding:0 5 0 5px;"><img src="images/icones/<?php echo "moovie.png"; ?>" alt="img"/></p>
				            <a href="">
							    <iframe width="300" height="166" src="<?php echo $resultat['lien'] ;?>" frameborder="0" allowfullscreen></iframe>
				            </a>
				                <br/><br/><b style="color:#61a0f5; text-align:left; font-size:14px; margin: 5px;">Titre : <?php echo $resultat['titre'] ;?></b><br/><br/>
				                <b style="color:#61a0f5; text-align:left; font-size:14px; margin: 5px;">Artiste : <?php echo $resultat['artiste'] ;?></b><br/><br/>  
					</div>
				
			<?php } ?>

			<br/><br/><div class="redbande" style="background-color:#b60c0c; color:white; width:auto;"><b style="margin: 5px 5px 5px 5px; padding:0 5 0 5px; font-size:18px; font-weight:bold; text-transform:uppercase;">Les autres vidéos</b></div><br/>
		  	<?php while($resultat1=mysql_fetch_array($req2)){   
    		?>

				   	<div class="videocontainer">
				        <p class="moovie" style="margin: 5px 0 0 0px; padding:0 5 0 5px;"><img src="images/icones/<?php echo "moovie.png"; ?>" alt="img"/></p>
				            <a href="">
							    <iframe width="300" height="166" src="<?php echo $resultat1['lien'] ;?>" frameborder="0" allowfullscreen></iframe>
				            </a>
				                <br/><br/><b style="color:#61a0f5; text-align:left; font-size:14px; margin: 5px;">Titre : <?php echo $resultat1['titre'] ;?></b><br/><br/>
				                <b style="color:#61a0f5; text-align:left; font-size:14px; margin: 5px;">Artiste : <?php echo $resultat1['artiste'] ;?></b><br/><br/>  
					</div>
				
			<?php } ?>

		</div><br/><br/>
		<a id="designfooter" href=""><img src="images/logo-pied.png"/></a>
	</div></div>

			<?php require_once('includes/incfiles/site-footer.inc.php');?>
	</div>
</body>
</html>

JENCAL a écrit :


C'est fou de pas dire merci un minimum.... surtout si on est tes ami(e)s. ça prend 15 secondes max.. t'a le temps de faire la modif mais pas de remercier les personnes qui t'aident, bien que si la personne aide par volontariat ce n'est pas un merci qu'elle attend je trouve cela déplacé de pas donner des nouvelles de l'évolution du problème...

ce n'est que la notification de ton mail qui m'a amené a me connecter à nouveau sur le forum. je n'avais pas encore appliquer le correctif. et si j'avais réussi, j'aurais marqué le sujet résolu.

Sghislain,

Tu m'envoies un mail en privé, mais je ne répondrais que sur ce forum et si tu n'as pas réponse immédiate, c'est que l'on fait peut-être autre chose...

Si tu ne résous pas ton problème, re-postes (comme tu l'as fait) et on y réfléchis TOUS ensemble donc sur le forum.

Tu as un truc qui cause ton problème c'est une div qui est le premier enfant de #contenu qui a une largeur de 940px et ça c'est pas bon sur ton responsive (ailleurs aussi d'ailleurs), c'est tout pourri !

<div id="contenu">
    <div style="background-color:#fff;height:1px;width:940px;"></div><br>
    ...
</div>

EDIT : Il faut que tu vois également ta class .videocontainer qui a des marges que tu devrais retravailler sur la version mobile.

EDIT 2 : oui, si tu supprimes le width 940px sur la div mentionnée et le margin: 17px; sur .videocontainer c'est parfait !
Modifié par MatthieuR (23 Mar 2016 - 16:53)

Sghislain a écrit :


ce n'est que la notification de ton mail qui m'a amené a me connecter à nouveau sur le forum. je n'avais pas encore appliquer le correctif. et si j'avais réussi, j'aurais marqué le sujet résolu.

Autant pour moi, j'ai écris trop vite.
Modifié par JENCAL (23 Mar 2016 - 16:54)

MathieuR merci pour tes réponses.
j'ai enlevé la première div dont tu parles et descendre et je suis passé de

 .videocontainer{border:1px solid gray; width: auto; text-align: center; background-color: white; margin: 15px 5 5 5px; padding:5 15 5 15px; box-shadow: 1px 1px 12px #555; }

à

  .videocontainer{border:1px solid gray; width: auto; text-align: center; background-color: white; margin: 5px 0 0 5px; padding:5 0 5 0px; box-shadow: 1px 1px 12px #555; }

malgré ça rien
Modifié par Sghislain (23 Mar 2016 - 17:32)

Tu as mis tes modifications en ligne ?
Car la div problématique est toujours là :

Modifié par MatthieuR (23 Mar 2016 - 22:04)

merci MathieuR pour tes réponses. j'ai remis ça en ligne vers 1h30 du mat et ça a marché je n'ai plus de marge. je ne suis pas revenu sur le forum parce que mon forfait internet est fini juste après la mise en ligne et hier je n'ai pas eu le temps de me reconnecter pour vous dire merci à tous.

cependant, j'ai toujours un souci avec ma page contact. c'est la seule page qui nécessite un scroll à droite. il n'y a pas de marge mais cela ne s'adapte pas or je n'ai prévu aucun width pour mes inputs je me suis dis si je met des width auto ça marcherait mais rien

<div style="background:#FFF; width:auto; z-index: 9999;"><div class="clearfix" style="width:auto; padding:0px 5px; margin-top:0px; text-align:left;">
            <div class="table centre" style="width:auto;"><div class="table-row">
            <div class="table-cell" style="width:auto; padding-top:5px;"><div style="width:inherit; display:block; clear:both">
    <div style="margin-right:65px;">
        <form name="ref_form" id="ref_form" class="formulaire" action="" method="POST" style="padding:0 3px 0 0px;">
                <input type="hidden" name="from" value="contacts" />
                <ul><li style="padding:12px 0 12px 5px;"><h2 style="font-size:21px; font-weight: bold;">Contactez-nous</h2>
                     <span class="required_notification">* Champs requis</span>
                </li></ul>
                <ul>
                    <li>
                        <label class="label1" for="objet"></label>
                        <input style="width:auto;" name="objet" id="objet" value="" type="text" placeholder="Saisir l'objet de votre message" required />
                    </li>
                    <li>
                        <label class="label1" for="identite"></label>
                        <input style="width:auto; text-transform: uppercase;" name="nom" id="identite" value="" type="text" placeholder="Noms Pr&eacute;noms" required />
                    </li>
                    <li>
                        <label class="label1" for="email"></label>
                        <input style="width:auto; text-transform: lowercase;" name="mail" id="mail" value="" type="email" placeholder="johndoe@gmail.com" required />
                    </li>

                </ul>
                <div style="display:block; clear:both;"><table border="0" cellpadding="0" cellspacing="0">
                    <tr><td width="auto" valign="top" style="padding-left:5px; text-align:center; font-size:14px; padding-top:10px;"><b></b><br>&nbsp;
                    <textarea name="message" rows="20" cols="120" style="margin-left:0px; overflow:auto; width:auto;" placeholder="Saisissez ici votre message" ></textarea></td></tr></table>
                </div>
                <ul>
                        <li>
                        <label class="label1" for="telephone"></label>
                        <input style="width:auto;" name="telephone" id="telephone" type="text" placeholder="Saisir votre numero de telephone"/>
                    </li>
                </ul>
                <ul style=" margin-top:10px;">
                    <li style="display:inline;"><button class="submit" type="submit" name="envoyer">Envoyez le message</button></li>
                </ul>
</form>