移动端（<400px）页面右侧留白及社交媒体图标显示问题求助

• 打开浏览器开发者工具（F12），切换到元素面板，选中<html>或<body>标签，查看右侧盒模型，定位是否有元素超出视口宽度。
• 排查小屏显示的元素（如表单控件、侧边栏）：若元素设置width: 100%，必须添加box-sizing: border-box，避免padding/margin导致总宽度溢出：

  .target-element {
    width: 100%;
    box-sizing: border-box; /* padding/margin计入宽度内 */
  }
  

• 强制表单元素适配小屏：input、textarea等默认可能有固定宽度，小屏时设置max-width: 100%：

  input, textarea, select {
    max-width: 100%;
    box-sizing: border-box;
  }
  

• 检查绝对定位元素：确认position: absolute元素的right值无异常，且left + width + right总和未超出视口。
• 临时测试方案：给body加overflow-x: hidden验证是否能消除留白（找到根源后建议移除，避免影响正常滚动）：

  body {
    overflow-x: hidden;
  }
  

• 对比正常页面的footer DOM结构：检查联系页footer是否多了嵌套容器或缺失类名，导致样式无法正常继承。
• 用开发者工具查看图标元素的computed样式：对比正常页面的display、width、font-size等属性，排查是否有联系页特有的CSS规则覆盖全局样式：

  /* 示例：可能存在的错误覆盖规则 */
  .contact-page .footer-social a {
    display: none; /* 导致图标隐藏 */
    width: 0; /* 导致图标缩成一团 */
  }
  

• 检查footer布局规则：若使用Flex布局，确认flex-wrap、justify-content设置正确，避免图标溢出被隐藏：

  .footer-container {
    display: flex;
    flex-wrap: wrap; /* 小屏图标自动换行 */
    justify-content: center; /* 避免图标挤到一侧 */
  }
  

• 清除联系页footer的额外边距：排查是否有针对联系页footer的特殊padding/margin设置，导致图标容器被挤压：

  .contact-page .footer-container {
    padding: 0;
    margin: 0;
  }
  

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