Question

我最近部署了我的第一个网站，在我的宽屏1920x1080显示器上，一切看起来都很棒。然而，事情开始变得非常奇怪13＆＃34;笔记本电脑的屏幕，平板电脑和手机我一直在分析我的代码和一些开发工具，例如googles和bootstraps推荐的移动设备，我似乎很难理解它在我的代码中需要修复。

在移动设备上，可以向右滚动到网站的某些部分甚至不存在，只需滚动到空白区域即可。我设法删除了移动导航栏 - 这是一个开始，但老实说，我觉得有点迷失/不堪重负，似乎找不到这个问题的根本原因。

这是我的网站：www.stewartehoff.com

和here是我的github存储库

请发送帮助！

Answer 1

你的CSS中有这个规则，这破坏了Bootstrap的.container类应该具有的响应效果（覆盖它应该使用的媒体查询集宽度，并且确实在其他中使用部分内容）：

.myskills .container {
  width: 1500px;
  position: relative;
  top: 35px;
}

在此示例中，设置固定宽度是问题所在。

网站上可能会有更多这样的例子，所以我建议您删除所有可以找到的例子。

一般情况下，我不提倡覆盖Bootstrap CSS类，但不确定为什么需要这样做，尤其是.container，.row和.col-xx-x类等结构元素

Answer 2

问题是您使用固定宽度的页面上的元素。

E.g。对于.container类，您指定了宽度970px。尝试使用百分比，如下：

.container {
width: 80%;
margin: 0 auto; //to center it
}

您基本上可以使用此解决方案并将其应用于页面上的其他问题，例如标题。

另请注意：

您还应该查看媒体查询，这样可以让您保持页面与大屏幕一样，只需将其更改为较小的屏幕，例如，定义最大宽度：< / p>

@media screen and (max-width: 800px) {
//anything you want for screens below a width of 800px
}

编辑：

我知道您正在使用Bootstrap - 在这种情况下，您需要完全删除所有覆盖Bootstrap默认配置的语句。

无论如何，请记住上层建议，以便将来进行CSS编码。

Answer 3

您已使用px设置容器宽度。

尝试使用%或直接删除这些px指标来更改它们。

Bootstrap containers将自己调整到所需的正确宽度。