@media screen and (min-width:1026px) 在特定页面上不起作用

Question

页面标题“Kasse”在桌面版本中不缩进最大 1140 像素。这是它不起作用的页面：https://www.paastoa.com/kasse/（您必须将一件商品放入购物车才能看到该页面，因此请先打开此链接：https://www.paastoa.com/?add-to-cart=2651，然后按“Weiter zur Kasse”按钮）

这里是一个例子，它工作的页面（使用相同的 CSS）：https://www.paastoa.com/forum/intervallfasten/

这是“.site-main”类的代码，它是“.header”的父类（页面标题是）：

@media screen and (max-width:1025px) {
    .site-main {
        max-width: 1140px!important;
        padding: 10px 30px 50px 30px!important
    }
}

@media screen and (min-width:1026px) {
    .site-main {
        max-width: 1140px!important;
        padding: 50px 0 50px 0!important
    }
}

感谢您的帮助，如果您需要更多详细信息，请随时询问。

Answer 1

我发现这个元素具有内联样式，你应该从元素中删除样式。

<section class="elementor-element elementor-element-4db61fc1 elementor-section-stretched elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section" data-id="4db61fc1" data-element_type="section" data-settings="{&quot;stretch_section&quot;:&quot;section-stretched&quot;}" style="width: 1583px; left: 0px;">

这是你的 CSS 的修复方法

@media screen and (min-width: 1026px) {
    .site-main {
        max-width: 1140px!important;
        padding: 50px 0 50px 0!important;
        margin: 0 auto;
    }
}

.elementor-1137 .elementor-element.elementor-element-4db61fc1 {
    color: #000000;
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 50px;
}