[nawilkesParticipant]

http://cwd.server310.com/

The second band below my main nav is a Rev Slider. When my page initially loads, the image is pushed up maybe 150 px, and a black band shows along the bottom. When I move to the next slide, the first image first adjusts so the black band is gone, then transitions to the next slide, which looks correct. From this point forward, everything looks good, even the first slide. I have tried swapping out the slide order, so a different slide is first, and the black band remains. How do I fix this “black band” error?

Possibly related: When I view the slider on a laptop, the black band thing still happens. In addition, however, each slide starts out pushed up, then adjusts to the correct position. This does not happen on my desktop.

[RupokMember]

Hi there,

Thanks for updating. Let’s take off all your custom CSS and check again.

If the issue still persist then you can add this under Custom > CSS in the Customizer.

.rev_slider .slotholder {
  top: 107px;
}

Hope this helps.

Cheers!

[nawilkesParticipant]

Thanks for this suggestion.

I removed all the custom CSS and saved, but the black stripe remained.

I added your custom code, but the black stripe remained.

Any other ideas?

[RupokMember]

Hi there,

Kindly update the code a bit –

.rev_slider .slotholder {
  top: 107px !important;
}

Hope this helps.

Cheers!

[nawilkesParticipant]

Added the above code, thank you. Now the initial presentation looks right, but when you go to the next slide, the black bar appears on top, and stays there permanently as you rotate through the slides.

Any other ideas? Thanks!

[Paul RModerator]

Hi,

Please remove .masthead under Fullscreen height.

http://screencast.com/t/BjxP0ysaKz

If that doesn’t help, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[nawilkesParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Yes, it’s only active with a full-screen slider.

It’s because to this CSS

.tp-bgimg.defaultimg {
    background-position-y: 0!important;
}

Slider dynamically computes image positioning based on container size, but you’re forcing it to use specific positioning.

I wrapped it in a comment block to disable it, your slider should be okay now.

Thanks.

[nawilkesParticipant]

I don’t think this code:

.tp-bgimg.defaultimg {
    background-position-y: 0!important;
}

is creating the problem. You commented it out, but the black band is still appearing upon initial page load.

[RadModerator]

Hi there,

In that case, would you mind removing all suggested code temporarily? All this CSS can affect the slider, especially the purpose of these CSS are to override slider’s default CSS. Once we’re done troubleshooting, you can then put back your custom CSS. We need to test it out clean for easier troubleshooting.

I did the test on my end and removing that CSS fixes the issue. I removed it from your custom CSS to test it out, and I just added it back.

Thanks.

[nawilkesParticipant]

Okay, I deleted the slider CSS. I don’t believe there is any code in my Custom CSS field relating to modifying the slider. Thanks!

[Nabeel AModerator]

Hi again,

To remove the black band, just add the following code in your Customizer via Appearance > Customize > Custom > CSS:

.home #x-section-3 .rev_slider_wrapper {
    background-color: transparent !important;
}

Let us know how this goes!

[nawilkesParticipant]

Yes, that code makes the band transparent instead of black. Thank you! That looks much better. The problem is still there, however: The initial slide is cropped and “pushed up.” When you go to the next slide, you can see the first slide adjust to full size first, then transition to the next slide. When you come around again to the first slide, it now shows at full size.

Why is the initial slide not showing completely? Thanks!

[ZeshanMember]

Hi there,

Revolution Slider itself is generating the initial position of the first slide background image (see: http://prntscr.com/9ryquu). I’m not sure why this is happening. However, you try to fix it by using following CSS code under Custom > CSS in the Customizer:

#rev_slider_3_2 .tp-revslider-mainul>li:first-child .slotholder {
    transform: translate3d(0px, 0px, 0px) !important;
}

Thank you!

[nawilkesParticipant]

That code solved the problem. Thank you!

[Author]

Posts