Slide show spacing on home page only

I am trying to close the gap and have the slider start under the navigation bar on the home page only. I used this css:
*Home Page Slide Show Close Gap */
.page-id-15819 .x-main.full.desktop {
margin-top: -160px!important;
}

and it works for the desktop - kind of. I need to scroll down and scroll up for it to position correctly and then it only works on the desktop. Is there a way to set this so it works on the initial page load?

Hello Georgia,

I have checked the site and I could see that there are empty <p> tags before the slider which is causing the space.

Kindly edit the content and make sure that there is no whitespace before the slider shortcode or however you added the slider content.

Hope this helps.

thank you.

Hello @GeorgiaG,

Thanks for writing in!

You do not need any custom css to remove the gap. Simply edit the page and make sure that there are no new line and line breaks before your NextGen Gallery shortcode.

If you won’t mind providing us access to the page, we would love to check it out and resolve the gap issue. You can provide the WP access in a secure note when you reply. To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

Hello @RueNel I would love it if you can look. It will not load for some reason now. It blinks on the screen and then disappears. I will leave you access in a note. I appreciate your offer very much. Best.

Hi @GeorgiaG,

There seems to be a JS error on your site

Please do testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Thanks,

I found that issue and it displays fine. Can you please look at the slideshow now. Thank you very much.

Hi @GeorgiaG,

Please add this to Theme Options > CSS

/*fix for the gallery on the homepage*/
@media (min-width: 468px) {
.home .masthead.masthead-inline {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.home p:empty {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.home .nextgen_pro_slideshow {
	margin-top: calc(144px - 75px) !important;
}
}

You can adjust the - 75px until the white gap is gone.

Please understand that is more of a quick fix than a final solution. The problem here is your Gallery plugin not calculating its proper height, it is more than 64px than the actual height, those JS errors on your site might have something to do with it, the rest of the spaces is caused by empty <p> tags like Jade mentioned above.

Please keep in mind that we cannot provide support for third-party plugins or scripts due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any further questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.