Reputation: 9
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 important
here. 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
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;
}
Upvotes: 0