Reducing page height

Question

I've a got a page in mobile where I've tried to turn everything black.

I did this as follows:

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

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

Id like to reduce the page height anyway, so tried:

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

Didn't work.

So now half the page is black, half is white, and I can't adjust the height even with importanthere. It seems to flash black when the page loads, but then turns white.

What's causing this?

<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">

you should avoid using `!important` as much as possible, don't use it everywhere, https://stackoverflow.com/questions/3427766/should-i-avoid-using-important-in-css — ROOT, May 02 '20 at 12:34
set your total body and html to black and correspondingly change other css accordingly — Dickens A S, May 02 '20 at 12:49

score 1 · Accepted Answer · answered May 02 '20 at 12:31

1

You need remove height: 600px !important in this css, also you have many fixed height in css, need remove it in @media for mobile.

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

answered May 02 '20 at 12:31

Hien Nguyen

24,551
7
52
62

Thanks. Tried that. Worked a bit but still some white space. – Stackinnerflow May 02 '20 at 12:36

Reducing page height

1 Answers1