Docs

[oshaga]

There is an annoying white space between my navigation bar and my slider.
SCREENSHOT: https://www.dropbox.com/s/fksa7tgwbgt4f14/white%20space%20%28181%29.jpg?dl=0

The site is http://www.fortsandshields.com. After searching this forum, I got this:
.x-header-landmark {
display: none;
}

.x-container.max.width.offset {
margin-top: -5px;
}

This css reduced the white space but there is still a white space. If I increase the margin-top t0 -20, the white space disappears by my other pages gets chopped off at the top too.
SCREENSHOTS:
https://www.dropbox.com/s/ilqteix15zzkdpd/other%20pages%20chopped%20off%20%28183%29.jpg?dl=0
https://www.dropbox.com/s/9mjys7ztlnaqgyy/no%20more%20white%20space%20but%20%28182%29.jpg?dl=0
https://www.dropbox.com/s/7ivk1dvfpsuvqvw/proper%20display%20of%20other%20pages%20%28184%29.jpg?dl=0

NOTE: MY SITE LAYOUT IS FULLWIDTH AND AM USING RENEW

[Friech]

Hi There,

Thanks for writing in! You don’t need the negative margin, just make it zero

.x-container.max.width.offset {
margin-top: 0;
}

Do you have something like this added manually on your content?

<p style="text-align: center;"><script data-cfasync="false" type="text/javascript">var lsjQuery = jQuery;</script><script data-cfasync="false" type="text/javascript">
lsjQuery(document).ready(function() {
if(typeof lsjQuery.fn.layerSlider == "undefined") { lsShowNotice('layerslider_1','jquery'); }
else {
lsjQuery("#layerslider_1").layerSlider({responsive: false, responsiveUnder: 1280, layersContainer: 1280, startInViewport: false, skin: 'noskin', globalBGColor: 'transparent', hoverPrevNext: false, autoPlayVideos: false, yourLogoStyle: 'left: 10px; top: 10px;', cbInit: function(element) { }, cbStart: function(data) { }, cbStop: function(data) { }, cbPause: function(data) { }, cbAnimStart: function(data) { }, cbAnimStop: function(data) { }, cbPrev: function(data) { }, cbNext: function(data) { }, skinsPath: 'http://www.fortsandshields.com/wp-content/plugins/LayerSlider/static/skins/'})
}
});
</script></p>

If so, please add a margin: 0; inline style on it. If not please provide us login credentials in private reply so we can take a closer look.

Thanks.

[oshaga]

This reply has been marked as private.

[Rue Nel]

Hello There,

I went ahead and removed the white space above your homepage. I added this css code in the customizer;

.page-id-2 .entry-content.content p:first-child{
  display:none;
}

The issue happens because you have wrap the layerslider with a p tag which is no necessary.

If ever you have a shortcode and would like to wrap it with an element, please use div.
<div class="my-custom-wrapper" style="text-align: center;">[layerslider id="1"]</div>

Hope this helps.

[CraftyChef]

Hello, I’m having a similar experience on my website: http://www.papernpepper.com/

And I’ve tried most of the CSS tricks I’ve found on KB and on this thread, however, I’m unable to fix it. Any assistance to resolve this would be really appreciated.

Warm regards,
Tulika

[Thai]

Hi Tulika,

Please add the following CSS:

.home .x-text p {
    margin: 0;
}

.home .x-navbar {
    height: 77px;
}

Hope it helps 🙂

[CraftyChef]

Thank you Thai, it helped! 🙂

[Thai]

If you need anything else please let us know.

[Author]

Posts