白色 space 在我网站 Angular 的右边

Question

Here 是我网站的 link。它工作正常，a-priori 在我的 phone 上也很好，但是，它不应该左右滚动，它只能上下滚动！使用 phone 时，我的网站右侧有一个奇怪的白色部分。当我打开开发人员模式并进入平板电脑模式并查看元素时。我看到 body 只是“好的部分”，HTML 中没有定义白色部分，所以我找不到问题的根源。

我的代码在 https://github.com/NEGU93/agustinbarrachina 中可用。我试过了：

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

如前所述here and here. I don't think the problem is related to the footer as it says here

这也很奇怪，因为我在主站点 (home) 中没有这个问题，所以我认为问题出在 timeline HTML 或 CSS.

Answer 1

两个问题：首先是将 <i> 元素定义为 600px 而不是 100%： https://github.com/NEGU93/agustinbarrachina/blob/master/src/app/timeline/timeline.component.css#L274

另一个只是在此处添加 overflow-x: hidden： https://github.com/NEGU93/agustinbarrachina/blob/master/src/app/timeline/timeline.component.css#L32

找到这些溢出元素的一个好方法是使用 chrome 开发人员工具缩小页面宽度，直到显示水平滚动条。

然后开始从 dom 中删除元素，方法是单击它们并按 DELETE 键。当你看到水平滚动消失的那一刻，你 CTRL+Z 并向下钻取到它的子元素，在那里你做同样的过程，直到你找到讨厌的元素。然后检查它的 CSS 道具，找出它为什么这样做。

白色 space 在我网站 Angular 的右边

White space at the right of my webite on Angular

html

css

responsive

angular