WordPress移动端图片无响应，自定义CSS修改无效求助

1. 先修复CSS语法错误 #

你提供的两段代码都存在语法问题，这是样式不生效的核心原因：

• 媒体查询规则缺少包裹代码块的大括号{}
• 修改后的代码中width: 500px;后面多了一个多余的反引号

修正后的基础代码如下：

@media only screen and (max-width: 767px) {
  .et_pb_image_0 .et_pb_image_wrap img {
    width: 500px;
    height: auto; /* 强制保持图片比例，避免拉伸变形 */
  }
}

2. 解决样式覆盖问题 #

如果修正语法后仍无效果，大概率是Divi主题的默认样式优先级更高，或图片容器限制了宽度：

• 提升选择器特异性：给选择器增加父级类来提高优先级，比如：

@media only screen and (max-width: 767px) {
  body .et_pb_section .et_pb_image_0 .et_pb_image_wrap img {
    width: 500px;
    height: auto;
  }
}

• 调整图片容器限制：如果.et_pb_image_wrap本身设置了max-width或overflow，需要同时修改容器样式：

@media only screen and (max-width: 767px) {
  .et_pb_image_0 .et_pb_image_wrap {
    max-width: none;
    width: auto;
  }
  .et_pb_image_0 .et_pb_image_wrap img {
    width: 500px;
    height: auto;
  }
}

3. 确保样式生效的最后一步 #

修改CSS后，按Ctrl + F5强制刷新浏览器页面，清除WordPress或浏览器的缓存，避免加载旧的CSS文件。

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