移动端友好网站文本区域适配问题：文本截断修复求助

你的问题出在使用了固定像素值的margin-left和width——在移动端屏幕宽度远小于900px时，固定宽度会让文本超出屏幕被截断，固定左外边距也会把内容挤到右侧区域，导致部分内容无法显示。

下面是适配移动端的修改方案，完全基于HTML和CSS，适合新手理解：

修改后的CSS代码 #

/* 先清除body默认的外边距，确保背景能完全延伸到页面边缘 */
body {
  margin: 0;
}

.main {
  text-align: center;
}

#about-me {
  text-align: left;
  background-color: #FF8242;
  font-size: 25px;
  /* 左内边距用百分比，适配不同屏幕的间距比例；上下右保留原padding */
  padding: 15px 15px 15px 10%;
  margin: 0;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: #5c362c;
}

#about-me p {
  /* 移除固定margin-left和width，让文本自动适配容器宽度 */
  margin-left: 0;
  width: auto;
  /* 可选：限制PC端文本最大宽度，避免过长影响阅读 */
  max-width: 800px;
}

#about-me h2 {
  /* 移除固定margin-left，跟着容器内边距对齐 */
  margin-left: 0;
}

/* 可选：针对移动端屏幕优化字体大小和内边距 */
@media (max-width: 768px) {
  #about-me {
    font-size: 18px;
    padding-left: 20px; /* 移动端用固定小间距，更贴合屏幕 */
  }
}

核心修改逻辑 #

1. 清除body默认margin：避免页面边缘出现空白，同时不用依赖负margin实现背景延伸，减少布局冲突。
2. 用百分比padding-left替代固定margin-left：在PC端和移动端都能保持内容与左边缘的合理间距，不会出现内容被挤出屏幕的问题。
3. 移除固定width：让文本自动填充容器的可用宽度，自然适配不同屏幕尺寸，解决截断问题。
4. 可选媒体查询：针对小屏幕调整字体大小和内边距，进一步提升移动端阅读体验。

你的HTML代码无需修改，直接替换CSS即可实现需求。

内容的提问来源于stack exchange，提问作者Mars