Removing white gap from Wordpress page

Question

The link below is where to find my website that I am making for a university project and for a client.

https://homepages.shu.ac.uk/~b7009049/wordpress/

Once the webpage loads up, you will be introduced with a page title populated with an image and two buttons. One will lead you to the About us and the other will take you to services. Click on the services button as that's where the problem is please.

Basically there is a white gap and I want the image below to completely fill up the page. Like a full screen except that you are not pressing F11 .

I don't know where the issue is. If I remove the header page, it does not do anything to clear the gap. So I don't think the header is the problem.

I am using fusion slider + a plugin called layerslider. If that helps.

I can provide a screenshot of what I am editing upon request if needed.

Thank you very much.

Answer 1

You have two things producing white space at the top of https://homepages.shu.ac.uk/~b7009049/wordpress/services/

One is padding applied to the "main" element. You can get rid of that with CSS:

/* REMOVE MAIN TOP PADDING ONLY ON THIS PAGE (id-2546) (AT LEAST FOR NOW) */
.page-id-2546 #main {
    padding-top: 0;
}

You might also want to get rid of the padding at the bottom of #main element on this page - padding-bottom: 0, of course

That will still leave a 20px white bar at the very top, produced by a stray 'p' element that has a bottom margin of 20px. Though this paragraph happens to contain a jQuery script (which probably shouldn't be there), there's another stray p element further down the page - also contained within "ls-" elements - also producing a 20px white separation between two full-width image elements, that happens to be empty.

I don't know exactly where these p's came from. You might have to dig into the applications involved - both Layer Slider and, I think, the Fusion Page Builder - and how they were deployed here, to remove the unwanted separation where it originates.

If they can't practically be cleaned up, you might have to correct via CSS again. Just to get rid of the effect on display on this page, you might try

/* REMOVE MARGIN ON POST PARAGRAPHS ON THIS PAGE */
.page-id-2546 .post-content p {
    margin: 0;
}

You could also try something like the following, if you were concerned about affecting other ".post-content" ps outside of Layer Slider.

/* TARGET LAYER SLIDER .post-content p TO REMOVE WHITE SPACE */
.page-id-2546 .post-content .ls-fullscreen-wrapper p {
    margin: 0;
}

Another approach would be to apply a negative margin to .ls-fullscreen-wrapper:

/* TARGET LAYER SLIDER WRAPPER TO REMOVE WHITE SPACE*/
.page-id-2546 .ls-fullscreen-wrapper {
    margin-top: -20px;
 }

Without actually working on the installation or examining it more thoroughly, I couldn't say for sure that the code I've provided would be sufficient and also wouldn't produce undesirable consequences, but it might be a start. You could add the snippets to the Customizer Additional CSS box, and see how things turned out.

ADDITIONAL NOTE AFTER COMMENTS

I've gone back to the page and it seems that you have successfully added code eliminating the 20px post-content p margin, but I don't see anything applied or applied and overruled regarding the 90px top (and bottom) padding on #main.

I don't know how exactly you're trying to address that problem. I previously recommended utilizing the Wordpress Customizer (assuming you're in Wordpess 4.7 or later) - see https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/.

From inspection I can see that the unwanted padding in question is added via the theme/Fusion stylesheet. The Customizer will add your new CSS to the underlying html, after other stylesheets have been loaded, so should override duplicated selectors. If it's still not taking, you could try, adding !important to the new styles. I think most coders would view this method as a kludge, but all of this after-the-fact correction effort is kludge-y.

/* LAST RESORT KLUDGE TO REMOVE 90px TOP PADDING ON #MAIN ON IDENTIFIED PAGE  */ 
.page-id-2546 #main {
   padding-top: 0 !important;
}

If that doesn't work - if inspection of the element doesn't show the code being applied at all, for instance - then I'd look to caching issues and peculiar theme characteristics, not to mention typos...

Answer 2

What worked for me was adding this code to my css

.ls-overflow-visible {
   overflow: hidden !important;
}

in my case the white piece above my menu was not caused by the padding but by an overflow that was only there when I switched to full width modus. You could of course delete this code:

.ls-overflow-visible {
    overflow: visible !important;
}

from the plugin css, but it will return when you perform an update.