时间戳

首页 > 解决方案 > 如何避免网站上的水平滚动

html - 如何避免网站上的水平滚动

问题描述

我最近使用 html 和 CSS 制作了一个致敬页面。该网站在桌面上看起来不错，但在移动设备上，会出现一个水平滚动条并使网站看起来左对齐。我认为这是因为图像超出了父容器，但我无法修复它。

Github 页面：https ://rahulviveknair.github.io/Coldplay-Tribute-Page/

托管在 github 上的代码：https ://github.com/RahulVivekNair/Coldplay-Tribute-Page

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

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

标签： htmlcssresponsive-designmedia-queriesmobile-website

解决方案

滚动条仅在您的标题“COLDPLAY”变得太大/太宽时出现，这是由于其字体大小。因此，您应该在定义较小设置#title的地方使用媒体查询。h1font-size

推荐阅读