反应性完全崩溃+全身无法识别的余量？

Question

https://github.com/donnieberry97/portfolio

https://donnieberry97.github.io/portfolio/

我已经链接了我的 github 和我的网站。我正在尝试建立我的投资组合网站，所以它仍处于早期阶段。

我已经构建了大部分桌面视图，现在正在尝试构建移动网站。但是，当我缩小网站时，该网站在移动设备上完全崩溃。

在移动视图中，右侧整个页面似乎有一个全局边距，我无法弄清楚它是什么，有人可以帮忙吗？

Answer 1

在页面的下方，您可以看到以非常大的字体书写的电子邮件地址：

<a class="email" href="mailto:donniejrberry@gmail.com">donniejrberry@gmail.com</a>

由于邮件地址不包含空格，因此它保留在 one 行中，但是由于您为其使用了相当大的字体大小，因此比 body！这会强制您的整个页面与邮件地址一样宽，因此会生成一个水平滚动条，因为它比视口宽。

解决方案：在移动版本中为该行使用较小的font-size。

对于其他看起来不太好看的东西，还可以对其中的许多元素使用媒体查询和较小的字体大小。