如何避免网站横向滚动

提问者：小点点

如何避免网站横向滚动

我最近用html和CSS制作了一个致敬页面。网站在桌面上看起来很好，但是在手机上，一个水平滚动条出现，使网站看起来左对齐。我想这是因为图片超过了父容器，但是我无法修复它。

Github页面:https://rahulviveknair.Github.io/coldplay-tauttribute-page/

托管在GitHub上的代码:https://gitHub.com/rahulviveknair/coldplay-tauttribute-page

用于调整图像但似乎不工作的代码

#image {
  max-width: 100%;
  display: block;
  height: auto;
  margin: 0 auto;
}

null

共3个答案

匿名用户

您可以这样做:
body{overflow:hidden；}
但这不是一个很好的方法。

首先，您应该修复H1:
H1{font-size:48px；}
还可以减小图像的宽度:
width=280px
但是最好将一个类设置为images.albums
.albums{width:280px；//或100%}
并设置页面的最小宽度:
body{min-width:320px；}

匿名用户

滚动条只有当你的标题“酷玩”变得太大/太宽时才会出现，这是由于它的字体大小造成的。因此，您应该对#title或H1使用媒体查询，其中您定义了较小的font-size设置。

匿名用户

在DevTools（如果你使用Chrome）中也可以调试到无法缓存。通常情况下，文件不会更新，即使更改了一些内容，也看不到任何结果。如果你是CSS技巧初学者，也请检查此页

附注。我也从CodeCamp开始祝你下次作业好运