Divi Builder CSS媒体查询失效，需固定元素尺寸求助

拖动浏览器窗口缩小后，网站的文本及元素尺寸会发生改变（两张截图展示变化），我希望通过CSS媒体查询让网站在各屏幕尺寸下显示效果一致，但添加自定义CSS后完全无效果。目前在MacBook Air上还存在图片截断、元素尺寸异常的情况。因为使用Divi Builder仅提供桌面、平板、移动端三种屏幕尺寸选项，所以尝试用自定义CSS适配更多屏幕。

缩小窗口前：

缩小窗口后：

我尝试的自定义CSS代码如下：

/*For browser/screen widths less than 768px*/
@media screen and (max-width: 1440px) {
    .container {
        max-width: 75%;
    }
    .content {
        width: 50%;
    }
}


@media only screen and (min-height: 900px){
    .container {
        max-width: 75%;
    }
    .content {
        width: 50%;
    }
}


@media only screen and (min-width: 900px) and (orientation: portrait) {
    .container {
        max-width: 75%;
    }
    .content {
        width: 50%;
    }
}

@media only screen and (min-width: 1440px) and (orientation: landscape){
    .container {
        max-width: 75%;
    }
    .content {
        width: 50%;
    }
}

排查方向 #

• CSS优先级冲突：Divi Builder生成的内置CSS优先级可能更高，可尝试给选择器添加更高权重（比如.et_pb_module .container），或临时用!important测试规则是否生效（不推荐长期依赖）。
• 媒体查询逻辑冗余：你写的几个媒体查询覆盖范围重叠，且所有规则的样式完全一致，没有针对不同屏幕做差异化适配，等于未起到调整作用。
• CSS加载验证：确认自定义CSS是否正确添加到Divi的自定义CSS区域（主题选项→自定义CSS），用浏览器开发者工具（F12）查看元素样式面板，检查你的媒体查询规则是否被加载或被其他样式覆盖。
• 视口元标签缺失：确保网站头部存在<meta name="viewport" content="width=device-width, initial-scale=1.0">，缺失该标签会导致媒体查询在移动设备或窗口缩放时失效。
• 尺寸单位问题：若网站元素使用em、rem或百分比单位，窗口缩小后会自动缩放；如需固定显示效果，可尝试改用px单位，或调整根元素字体大小来控制缩放比例。

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