CODEWITHSUNDEEP
htmlcss
Stackinnerflow
Stackinnerflow

Reputation: 9

Reducing page height

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

Upvotes: 0

Views: 971

Answers (1)

Hien Nguyen
Hien Nguyen

Reputation: 18973

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;
}

enter image description here

Upvotes: 0

Related Questions