[Résolu] Contenu plus grand que l'écran smartphone

Question

userdev

26 Jan 2016 à 08:10

Hello,
j'ai un soucis en mode smartphone sur mon site.

j'ai un écart sur la droite du body ou du html. Je le remarque car quand je fais glisser le contenu de la page vers la gauche avec mon doigt la page se déplace de quelques pixel et une marge apparaît sur la droite (plus épaisse que la barre de défilement).
C'est le contenu html qui pose problème car l'espace sur la droite est bleu (j'ai mis un background bleu sur le html et un rouge sur le body)
Merci


<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    <meta name="description" content="@ViewBag.Description" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://malsup.github.io/jquery.cycle2.js"></script>

</head>
<body class="body">
    <div class="logo">
        <img src="~/Content/images/logo_site1.jpg" class="imglogo"/><!--
     --><p class="nomsite">Edition Photo</p><!--
     --><div class="divlogin">
            @Html.Partial("_LoginPartial", ViewData["Idcommande"])
        </div>
    </div>
    <div class="container containermenu">
        <label for="show-menu" class="show-menu"></label>
        <input type="checkbox" id="show-menu" role="button">
        <ul id="menu">
            <li>@Html.ActionLink("Accueil", "Index", "Home")</li>
            <li>@Html.ActionLink("Prix retouche", "Prixretouche", "TTypeRetouches")</li>
            <li>@Html.ActionLink("Commande", "VCreateCommande", "CCommande")</li>
            <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
        </ul>
    </div>
    @RenderBody()

    <script type="text/javascript">
        var $j = jQuery.noConflict();

        $j(document).mouseup(function (e) {
            var container = $(".show-menu");
            if (container.has(e.target).length === 0)
                $('#show-menu').prop("checked", false);
        });

    </script>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>





<div class="col-dynamique">
    <p>
        <img src="~/PhotoDiaporama/photo_portrait_1.jpg" alt="photo portrait" />
        <img src="~/PhotoDiaporama/photo_portrait_2.jpg" alt="photo portrait" />
    </p>
</div>
<div class="row">
    <div class="rowdiaposervice">
        <div class="col-retouche-diapo">
            <h1>Les retouches photo</h1>
            <div class="col-diaporama">
                <!--Mettre des images de meme hauteur-->
                <div id="slideshow" class="cycle-slideshow" data-cycle-slides="div">
                    @{
                        var i = 1;
                        var hn = 2;
                    }
                    @foreach (var item in Model.Tdiaporamas)
                    {
                        var divid = "divimg" + i;
                        if (item.TitreRetouche == "")
                        {
                            <div id="@divid">
                                <img src="..@item.SRCPhoto" alt="@item.DescriptionPhoto" class="photodiaporama" />
                            </div>
                        }
                        else
                        {
                            <div id="@divid" class="divdiaporama">
                                @Html.WriteHeader(@item.TitreRetouche, "htitreretouche" + hn, hn)
                                <img src="..@item.SRCPhoto" alt="@item.DescriptionPhoto" class="photodiaporama" />
                            </div>
                            hn++;
                        }

                        i++;
                    }
                </div>
            </div>
        </div><!--
        --><div class="col-service">
            <p>
                Nous sommes sp&eacute;cialistes de la retouche de photo, nous proposons nos services &agrave; nos clients et mettons à disposition notre site web ainsi qu'un espace de stockage
                pour d&eacute;poser vos photos et s&eacute;lectionner parmis plusieurs possibilit&eacute;s les retouches d&eacute;sir&eacute;es pour vos images.
            </p>
            <p>
                Nous proposons diff&eacute;rentes retouches, nous corrigons les défauts de vos photos et transformons vos images en noir et blanc, en aspect dessin, en aspect flout&eacute;, nous les modifions de mani&egrave;res
                &agrave; les embellir.
            </p>
            <p>
                Nous r&eacute;alisons &eacute;galement la suppression d'&eacute;lements d'une photo:<br /><ul class="ullistsupp"><li class="listsupp">personne</li><li class="listsupp">objet</li><li class="listsupp">ombre</li><li class="listsupp">yeux rouges...</li></ul>
            </p>
            <p>
                Nous ajoutons des &eacute;l&eacute;ments sur les photos &agrave; votre demande
                ou bien des &eacute;l&eacute;ments que nous proposons. Nous fusionnons plusieurs de vos photos en une seule en assemblant harmonieusement les différentes parties.
            </p>
        </div>
        <br />
        <br />
    </div>

    <div class="col-fonctionnement">

        @Html.WriteHeader("Fonctionnement de nos services", "hfoncservice", hn)

        <p>
            Les tarifs de nos prestations pour chaque type de retouche sont consultables dans la section tarif.
        <p>
            Le principe est simple, vous passez votre commande sur notre site et d&eacute;poser vos photos en choisissant pour chacune les retouches d&eacute;sir&eacute;es.
            Nous prenons ensuite en charge votre commande dans un d&eacute;lai d'une &agrave; deux journ&eacute;es et effectuons les transformations de vos images.
            D&egrave;s r&eacute;ception de votre r&egrave;glement, nous mettons a disposition en t&eacute;l&eacute;chargement sur votre espace vos images finalis&eacute;es.
        </p>
        <p>
            Le principe est simple, vous passez votre commande sur notre site et d&eacute;poser vos photos en choisissant pour chacune les retouches d&eacute;sir&eacute;es.
            Nous prenons ensuite en charge votre commande dans un d&eacute;lai d'une &agrave; deux journ&eacute;es et effectuons les transformations de vos images.
            D&egrave;s r&eacute;ception de votre r&egrave;glement, nous mettons a disposition en t&eacute;l&eacute;chargement sur votre espace vos images finalis&eacute;es.
        </p>
    </div>

    <footer class="footer">
        <p class="footer-left">&copy; @DateTime.Now.Year - Edition Photo Site</p>
    </footer>
</div>


html{
    height:100%;
    width:100%;
    background-color: 								#f8f6f6;
    background-color:blue;
    -webkit-text-size-adjust:100%;-ms-text-size-adjust:100%

}

body {
    position:relative;
    min-height:100%;
    height:100%;
    margin:0;
    padding:0;
    padding-bottom:50px;
    width:100%;
    font-size:1.3em;
    color:#12433d;
    /*background-color:#f8f6f6;*/
    background-color:red;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}


.logo{
    display:inline-block;
    width:100%;
    vertical-align:top;
}

.imglogo{
    display:inline-block;
    width:15%;
    vertical-align:top;
}

.nomsite{
    width:30%;
    margin-top:1%;
    font-family:Helvetica Neue;
    font-size:1.7em;
    color:#40535b;
    display:inline-block;
    vertical-align:top;
}

.divlogin{
    display:inline-block;
    width:55%;
    vertical-align:top;
}

.row{
    position:relative;
    width:74%;
    display:inline-block;
	/* Ombre portée */
	-webkit-box-shadow: 							4px 2px #9b9a9a,  -5px 3px 5px #9b9a9a;   
	-moz-box-shadow: 								5px 3px 5px #9b9a9a,  -5px 3px 5px #9b9a9a;   
	box-shadow: 									6px 4px 6px #9b9a9a,  -6px 4px 6px #9b9a9a;     
    color:#12433d;
    background-color:#c6dbe5;
    vertical-align:top;
    font-family:Helvetica Neue;
    margin-left:6%;
    padding-bottom:50px;
    margin-bottom:50px;
}

Modifié par userdev (26 Jan 2016 - 08:19)

userdev

26 Jan 2016 à 08:37

c'est bon j'ai trouvé, j'avais un margin-left sur mon footer qui fesait dépasser le contenu;
Merci

Sujet clos

CSS et mise en forme, CSS3

[Résolu] Contenu plus grand que l'écran smartphone