Пространство справа от тела для небольших устройств - PullRequest
Новая
       0

Пространство справа от тела для небольших устройств

1 голос
/ 01 ноября 2019

У меня проблема с моим сайтом, использующим Bootstrap. Все работает хорошо, пока я не пытаюсь увидеть, реагирует ли мой веб-сайт. Похоже, у меня есть белое правильное пространство на моем теле, но только на определенной части моего сайта. Все замечательно, когда я прокручиваю в середине страницы.

Я пытался поставить css overflow-x: hidden на моем css, но это не решает проблему.

РЕДАКТИРОВАТЬ: Вы можете увидеть мой сайт здесь: https://www.simpledecours.web -edu.fr / site / , код также можно увидеть там.

Вот мой html: 

<!doctype html>
<html lang="fr">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="shortcut icon" href="icons/eye.png">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="titleCss.css">
    <title>Coucou</title>
</head>

<body>
    <div class="container-fluid">
    <nav class="navbar fixed-top navbar-expand-md navbar-light">
        <a class="navbar-brand" href="#home"><img src="icons/eyeWhite.png" style="max-width: 30px;"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#lesServices">NOS SERVICES <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#lesValeurs">NOS VALEURS <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#leContact">CONTACT <span class="sr-only">(current)</span></a>
                </li>
            </ul>
        </div>
    </nav>
</div>


    <div class="container-fluid" id="home">
        <div class="row align-items-center" id="rowHome">
            <div class="col-md-12" id="textHome">
                <h1>Solution digitale pour&nbsp;<a class="typewrite" data-period="2000" data-type='[ "entrepreneurs", "créateurs", "vous." ]'></a></h1>
                <a href="#titreServices"><button type="button" class="btn top-buffer">En savoir plus</button></a>
            </div>
        </div>
    </div>


    <div class="container-fluid" id="lesServices">
        <div class="row align-items-center" id="rowServices">
            <div class="col-md-12" id="titreServices">
                <p class="subtitle fancy"><span>NOS SERVICES</span></p>
            </div>
        </div>
        <div class="row align-items-center" id="services" data-aos="fade-up">
            <div class="col-md-4" id="web">
                <div class="containsTextWeb">
                    <img src="icons/monitorBlue.png" style="max-width: 30%">
                    <h2 class="titreService"><b>SITE VITRINE</b></h2>
                    <hr class="hrServices">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat metus sit amet urna accumsan, nec venenatis ipsum efficitur. Aenean a egestas est. Suspendisse neque mauris, tempus a tortor eu, pharetra viverra ipsum.</p>
                </div>
            </div>
            <div class="col-md-4" id="social">
                <div class="containsTextSocial">
                    <img src="icons/digital-campaignBlue.png" style="max-width: 30%">
                    <h2 class="titreService"><b>RESEAUX SOCIAUX</b></h2>
                    <hr class="hrServices">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat metus sit amet urna accumsan, nec venenatis ipsum efficitur. Aenean a egestas est. Suspendisse neque mauris, tempus a tortor eu, pharetra viverra ipsum.</p>
                </div>
            </div>
            <div class="col-md-4" id="maintenance">
                <div class="containsTextMaintenance">
                    <img src="icons/dataBlue.png" style="max-width: 30%">
                    <h2 class="titreService"><b>MAINTENANCE</b></h2>
                    <hr class="hrServices">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat metus sit amet urna accumsan, nec venenatis ipsum efficitur. Aenean a egestas est. Suspendisse neque mauris, tempus a tortor eu, pharetra viverra ipsum.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid" id="lesValeurs">
        <div class="row align-items-center" id="rowValeurs">
            <div class="col-md-12" id="titreValeurs">
                <p class="subtitle fancy"><span>NOS VALEURS</span></p>
            </div>
        </div>
        <div class="row align-items-center" id="valeursHaut" data-aos="fade-left">
            <div class="col-md-4" id="icone1">
                <div class="containsTexteIcone1">
                    <img src="icons/graphicBlue.png" style="max-width: 10%">
                    <h2 class="titreValeurs">RESULTAT</h2>
                    <hr class="hrValeurs">
                    <p>Consectetur adipiscing elit. Donec placerat metus sit amet urna accumsan.</p>
                </div>
            </div>
            <div class="col-md-4" id="icone2">
                <div class="containsTexteIcone2">
                    <img src="icons/likeBlue.png" style="max-width: 10%">
                    <h2 class="titreValeurs">VISIBILITE</h2>
                    <hr class="hrValeurs">
                    <p>Dolor sit amet, consectetur adipiscing elit. Donec placerat metus sit amet urna accumsan.</p>
                </div>
            </div>
            <div class="col-md-4" id="icone3">
                <div class="containsTexteIcone3">
                    <img src="icons/supportBlue.png" style="max-width: 10%">
                    <h2 class="titreValeurs">DISPONIBILITE</h2>
                    <hr class="hrValeurs">
                    <p>Consectetur adipiscing elit. Donec placerat metus sit amet urna accumsan.</p>
                </div>
            </div>
        </div>
        <div class="row align-items-center" id="valeursBas" data-aos="fade-right">
            <div class="col-md-4" id="icone4">
                <div class="containsTexteIcone4">
                    <img src="icons/supportBlue.png" style="max-width: 10%">
                    <h2 class="titreValeurs">CONCENTREZ VOUS SUR VOTRE METIER</h2>
                    <hr class="hrValeurs">
                    <p>Consectetur adipiscing elit. Donec placerat metus sit amet urna accumsan.</p>
                </div>
            </div>
            <div class="col-md-4" id="icone5">
                <div class="containsTexteIcone5">
                    <img src="icons/graphicBlue.png" style="max-width: 10%">
                    <h2 class="titreValeurs">A L'ECOUTE</h2>
                    <hr class="hrValeurs">
                    <p>Consectetur adipiscing elit. Donec placerat metus sit amet urna accumsan.</p>
                </div>
            </div>
            <div class="col-md-4" id="icone6">
                <div class="containsTexteIcone6">
                    <img src="icons/likeBlue.png" style="max-width: 10%">
                    <h2 class="titreValeurs">PROCHE DE VOUS</h2>
                    <hr class="hrValeurs">
                    <p>Consectetur adipiscing elit. Donec placerat metus sit amet urna accumsan.</p>
                </div>
            </div>
        </div>
    </div>




    <div class="container-fluid" id="leContact">
        <div class="row align-items-center" id="contact">
            <div class="col-md-8 align-items-center" id="labelContact">
                <p>Vous avez besoin de plus d'informations ? Contactez nous pour faire un devis gratuit !</p>
            </div>
            <div class="col-md-4" id="formContact">
                <a href="contact.html"><button type="button" class="btn btnContact">Contact</button></a>
            </div>
        </div>
    </div>




    <footer>
        <div class="container-fluid" id="footer">
            <div class="row align-items-center">
                <div class="col-md-12" id="arrowFooter">
                    <a href="#home"><img src="icons/navigate-up-arrowWhite.png" style="max-width: 40px;"></a>
                </div>
            </div>
            <div class="row align-items-center">
                <div class="col-md-6" id="autreFooter">
                    <h1><a href="#home"><u>NomEntreprise</u></a></h1>
                    <ul class="listeFooter">
                        <li><a href="#services">Nos services</a></li>
                        <li><a href="#valeurs">Nos valeurs</a></li>
                        <li><a href="contact.html">Nous contacter</a></li>
                    </ul>
                </div>
                <div class="col-md-6" id="contactFooter">
                    <h1><u>Autres contacts : </u></h1>
                    <div class="tel">
                        <img src="icons/telephoneWhite.png" style="max-width: 20px;">
                        <p>+33 5 49 52 32 17</p>
                    </div>
                    <div class="mail">
                        <img src="icons/emailWhite.png" style="max-width: 20px;">
                        <p>contact@maildetest.com</p>
                    </div>
                </div>
            </div>
            <div class="row align-items-center">
                <div class="col-md-12" id="socialMediaFooter">
                    <a href="#"><img src="icons/facebook.png" style="max-width: 40px;"></a>
                    <a href="#"><img src="icons/twitter.png" style="max-width: 40px;"></a>
                </div>
            </div>
            <div class="row" id="rowCopyright">
                <div class="col-md-12" id="copyAndMentionsLegales">
                    <p id="text">Copyright ©</p>
                    <p id="date">
                        <script>
                            var d = new Date();
                            var annee = d.getFullYear();
                            document.getElementById("date").innerHTML = annee;

                        </script>
                        All right reserved | <a href="#mentionlegales"><u>Mentions Légales</u></a> | Icons made by <a href="https://www.flaticon.com/authors/prettycons" title="prettycons">prettycons</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
                    </p>
                </div>
            </div>
        </div>
    </footer>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="typewritter.js"></script>
    <script src="navbar_anim.js"></script>
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
        AOS.init({
            duration: 1600,
        });

    </script>
</body>

</html>

, а вот мой css: 

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: Roboto, sans-serif;
    background-color: rgba(102, 102, 102, 0.12);
}

.navbar {
    background-color: transparent;
    transition: 0.5s;
    font-size: 12px;
}

.navbar.scrolled {
    background-color: #fff;
    color: #007bff;
    transition: 0.5s;
    box-shadow: 3px 2px 1px 1px rgba(102, 102, 102, .2);
}

#navbarSupportedContent li a {
    color: #fff;
}

.navbar.scrolled #navbarSupportedContent li a {
    color: #007bff;
}

#home {
    height: auto;
    background-color: #007bff;
    color: #fff;
}

#rowHome {
    height: 675px;
}

#textHome {
    text-align: center;
}

.btn {
    color: #fff;
    border-color: #fff;
}

.btn:hover {
    background-color: #fff;
    color: #007bff;
}

.top-buffer {
    margin-top: 1%;
}

#rowServices {
    margin-top: 3%;
}

#services {
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
    height: auto;
    margin-top: 2%;
    margin-bottom: 5%;
}

#web h2,
#social h2,
#maintenance h2 {
    margin-top: 5%;
    color: rgba(102, 102, 102);
    font-size: 20px;
}

.col-md-4 .titreValeurs {
    margin-top: 5%;
    color: rgba(102, 102, 102);
    font-size: 15px;
}

.containsTextMaintenance p,
.containsTextSocial p,
.containsTextWeb p {
    margin-top: 5%;
    color: #666666;
}

#lesValeurs {
    width: 100%;
    background-color: #fff;
}

#valeursHaut,
#valeursBas {
    text-align: center;
    width: 100%;
    margin-top: 2%;
    margin-left: 0px;
    margin-right: 0px;
}

#valeursHaut h2,
#valeursBas h2 {
    font-size: 16px;
    color: #666666;
}

#valeursHaut p,
#valeursBas p {
    color: #666666;
    font-size: 13px;
}

#icone1,
#icone2,
#icone3,
#icone4,
#icone5,
#icone6 {
    height: 200px;
}



.hrServices {
    width: 18%;
    border: 1px solid rgba(102, 102, 102, 0.75)
}

.hrValeurs {
    width: 20%;
}

#contact {
    text-align: center;
    height: 150px;
    background-color: #007bff;
}

#labelContact {
    color: #fff;
    font-size: 20px;
}

.btnContact {
    padding: 6px 32px 6px 32px;
}

#footer {
    background-color: #00448e;
}

#text,
#date {
    color: #fff;
    display: inline-block;
    font-size: 12px;
}

.tel img,
.tel p {
    display: inline-block;
    color: #fff;
    font-size: 14px;
}

.tel,
.mail {
    padding-left: 10%;
}

.listeFooter {
    padding-left: 10%;
}

.mail img,
.mail p {
    display: inline-block;
    color: #fff;
    font-size: 14px;
}

#arrowFooter {
    text-align: center;
}

#footer h1 {
    text-align: center;
    font-size: 20px;
    color: #fff;
}

#socialMediaFooter {
    text-align: center;
}

#footer a {
    text-decoration: none;
    color: #fff;

}

#footer ul {
    list-style: none;
    font-size: 14px;
}

1 Ответ

1 голос
/ 01 ноября 2019

Это из-за AOS fade-left эффекта. Он резервирует дополнительные пиксели для анимации. Вы можете переопределить его поведение, отметив css !important для вашего собственного стиля переполнения (или выберите другие эффекты, если для вас не имеет значения fade-left.)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...