Black space appearing below parallax images in mobile view, Brine 7.0 template

Site URL: https://typeaprofessionals.com

Hi there, I'm using the Brine 7.0 template with the parallax scrolling effect for three images on my home page. 

The images look fine on desktop and tablet view, but when I look at my site on my phone, I notice there is a black space below the images before they start scrolling (shown below).

I'm using this CSS to make the header fixed--could this be cause of the black space problem beneath the images? Any idea how to fix? Thank you!

//fixed header navigation//

.Header.Header--top {
  position: fixed;
  top: 0px;
  z-index:1000;
  width:100%;
}
.Intro {padding-top:100px;}
.Index {padding-top:100px;}
.Main {padding-top:100px;}
.Main.Main--page {padding-top:100px !important;}
.Main.Main--blog-item {padding-top:0px !important;}

@media only screen and (max-width: 480px) {
  .Main {padding-top:0px !important;}
  .Intro {padding-top:0px !important;}
  .Index {padding-top:0px !important;}
  .Main.Main--page {padding-top:0px !important;}
}

Hi. It looks fine here. Did you solve the problem?

Hi tuanphan, thanks for checking in. No, I didn't receive any responses on how to fix so there are still black spaces beneath the home page images when I scroll on my tablet and mobile.

Any suggestions?

Actually, I see fine here :( Which mobile/browser do you use?

I use Safari on my iMac, iPad, and iPhone. I also notice that sometimes the scrolling appears choppy.

Perhaps both of these issues are browser-related? 

Hi,
I'm having the same issue with the black bars under every image. I'm viewing on iPhone safari or chrome and it always displays those black bars beneath images. If viewing from computer site editor in mobile view, then it doesn't display those bars - only from mobile device. I'm using 7.0 Brine Ethan template.
Any help?  Site URL:  https://www.avanor-acoustics.com/en/loudspeakers

The only used CSS is this:

/* transparent header box */
header.Header.Header--top {
    position: absolute;
    z-index: 999;
    top: 0;
    width: 100%;
    background: transparent;
}

/* disable hypens */
p, h1, h2, h3 {hyphens: manual !important; -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; }

On 4/13/2022 at 8:05 PM, Alvis said:

Hi,
I'm having the same issue with the black bars under every image. I'm viewing on iPhone safari or chrome and it always displays those black bars beneath images. If viewing from computer site editor in mobile view, then it doesn't display those bars - only from mobile device. I'm using 7.0 Brine Ethan template.
Any help?  Site URL:  https://www.avanor-acoustics.com/en/loudspeakers

The only used CSS is this:

/* transparent header box */
header.Header.Header--top {
    position: absolute;
    z-index: 999;
    top: 0;
    width: 100%;
    background: transparent;
}

/* disable hypens */
p, h1, h2, h3 {hyphens: manual !important; -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; }

Hi,

It looks fine to me. Did you solve or still need help?

20 hours ago, tuanphan said:

Hi,

It looks fine to me. Did you solve or still need help?

Hi,
No I have not found the solution to those black bars yet. I have even tried setting all the background objects and box colors to red, to see witch might be causing the problem, but none did. As I said before it only appears on mobile devices - not on desktop when you preview from mobile view. I saw those black bars on several different mobile devices, so it's not something specific with a screen size.

Try adding this to Design > Custom CSS

/* Black bar */
.tweak-overlay-parallax-enabled .Parallax-item {
    background-color: white !important;
}