我的网站仅在移动设备上向右滚动，但是只有白色 space

Question

我使用HTML5、CSS3、Bootstrap 4 和SCSS 以及一些JavaScript 和JQuery 设计了自己的网站。该网站在桌面上看起来不错，但在移动设备上右侧有多余的白色 space，尽管我在所有设备尺寸上都将溢出设置为隐藏。

我已经使用开发人员工具检查了所有元素，看不出有任何原因会出现这种行为，但我觉得这与轮播有关，因为它也发生在我仅在带轮播的页面。

这可以在https://www.mediumcarlie.co.uk

看到

我已经使用开发人员工具来尝试检查问题，我用谷歌搜索了所有内容，我已经将几乎所有我能够设置的元素的最大宽度设置为 100%，我已经使用了媒体查询和 Bootstrap 调整轮播元素大小的变量。

 <a href="#myCarousel" data-slide="prev" class="carousel-control-prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
 <a href="#myCarousel" data-slide="next" class="carousel-control-next">
                <span class="carousel-control-next-icon"></span>

我希望较小的设备上不会有额外的白色 space。目前只有索引页

手机屏幕右侧有白色space

Answer 1

尝试删除 margin-right: 15px;在#home-heading > overlay-container > row

Answer 2

divs with class "row" in the Bootstrap should be wrapped with div with class "container". 在你的例子中，你在 id = "home-heading" 的部分有问题。使用如下包装

<section id="home-heading" class="py-5">
    <div class="dark-overlay">
        <div class="container">
            <div class="row">...</div>
        </div>
    </div>
</section>

Answer 3

最简单的方法是将 overflow-x:hidden; 添加到 HTML 元素，因为没有内容会出现在溢出部分，通过添加它您将不会收到水平滚动。

接下来是您收到此信息的原因：在主页标题部分，有一行没有容器 class 您需要在该行之前添加容器 class 以便对其进行排序。

<section id="home-heading">
    <div class="dark-overlay">
        <div class="container">
            <div class="row">Loprem Ipsum</div>
        </div>
    </div>
</section>

我的网站仅在移动设备上向右滚动，但是只有白色 space

My website scrolls to the right on mobile devices only, however there is only white space

css

mobile

visual-web-developer

sass

bootstrap-4