降低页面高度

Question

我在移动设备上有一个页面，试图将所有内容变黑。

我这样做如下：

@media (max-width: 768px) 
{body, html.page-id- 
28{background-color: 
black! important;}}

@media (max-width: 768px) 
{. parallax-window 
{background-color: black! 
important;}}

Id无论如何都希望减小页面高度，所以尝试过：

 @media (max-width: 768px) {.page-id-28{height: 600px
!important}}

没用。

因此，现在页面的一半是黑色，一半是白色，即使使用important here，我也无法调整高度。页面加载时，它似乎闪烁黑色，然后变成白色。

是什么原因造成的？

<div class="parallax-window fullscreen" data-parallax="scroll" data-image-src="http://4309.co.uk/wp-content/uploads/2019/08/download-2.png" data-ios-fix="true" data-over-scroll-fix="true" data-android-fix="true">
            <div class="align-transform">

                    <div class="row">


                        <div class="top-parallax-section">
                            <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">

Answer 1

您需要在此CSS中移除height: 600px !important，并且在CSS中有许多固定高度，需要在@media移动版中将其移除。

@media (max-width: 768px)
.parallax-window {
    background-color: black !important;
    /* height: 600px !important; */
    top: -400px;
}