Reducing white space

OK, after a long process of elimination I worked out how to remove the white space between the end of the page content and the beginning of the footer.

However, I still can’t work out how to reduce the white space that appears immediately before the bottom line (‘Proudly powered by WordPress’).

Can anyone help?

Ok, final problem solved more by luck than by skill!

I implemented some code posted by wrigs1 (problems unhiding Main Nav Menu at bottom of page) to show the Main Navigation Menu at the bottom of the page. Conveniently, this reduced the white space that appears immediately before the bottom line. Can’t work out why but, nevertheless, problem solved!

I’m trying to accomplish this too. Would you be kind enough to let us know how you did it?

I’ve provided (below) my twentysixteen-child style sheet (style.css). The code to unhide the main navigation menu is near the end. However, it created a new problem in that it distorted the positioning of the credits in the footer. I couldn’t work out why this was happening and the only way I was able to fix this was to create a child version of the footer with the credits removed.

I hope this is sufficient for you. My site is https://www.hotsbath.uk if you want to see the final results.

/*
Theme Name: twentysixteen-child
Author: Robin Henderson
Template: twentysixteen
Version: 0.1.0
 */
@import url("../twentysixteen/style.css");

/**
 * Place changes to the parent's style below this comment
 */

/**
 * Reduce the white space at the top and bottom of the header area
 */

.site-header {
    padding-top: 0;
    padding-bottom: 0;
}

/**
 * Reduce the white space which follows the page area (.entry-content)
 */

.site-main {
   margin-top: 0;
   margin-bottom: 0;
   padding-top: 0;
   padding-bottom: 20px;
}

/**
 * Reduce the white space immediately above the footer
 */

.entry-footer {
   margin-top: 0;
   margin-bottom: 0;
   padding-top: 0;
   padding-bottom: 0;
}

/**
 * Reduce white space at the top and bottom of the bottom widget area
 * Doesn't have any effect, more investigation required
 */

.content-bottom-widgets {
   padding-top: 0;
   padding-bottom: 0;
   margin-top: 0;
   margin-bottom: 0;
}

/**
 * Reduce the white space immediately above the footer
 */

.site-footer {
   margin-top: 0;
   margin-bottom: 0;
   padding-top: 0;
   padding-bottom: 0;
}

.main-navigation {
   margin-top: 0;
   margin-bottom: 0;
   padding-top: 0;
   padding-bottom: 0;
}

/**
 * Twentsixteen serves HTML for Main Navigation at both "top" and "bottom" of page
 * but on wider screens its CSS prevents Main Nav display in the footer.
 * This code un-hides the Main Navigation Menu at the foot of the page.
 */

@media screen and (min-width: 56.875em) {
  .main-navigation ul .dropdown-toggle.toggled-on,
  .site-footer .main-navigation {
    display: block;
  }
}

.site-title {
   margin-left: 0;
}

That’s very kind – thanks for your prompt response.

Hi I cant get rid of the spacing above the h1 tag and below the facebook like.

I tried the
.site-main {
margin-top: 0;
padding-top: 0;}

but it didn’t do anything. I also tried

.entry-content {
margin-top: 0;
padding-top: 0;}

Site is:
https://www.broomeandthekimberley.com.au/broome-events/

Appreciate any help

I can’t offer much help as I’m only a novice at this.

However, as far as I can determine, .site-main will affect the white space after the page area whereas I think you are looking higher up the page than that.

I can’t comment on .entry content as I haven’t used it myself.

From looking at your website, on some pages there is more white space below the facebook line than on others. It appears that the pages which don’t have a heading at the top have less white space. Therefore, I’m wondering if you ought to look at how your headings are produced.

You might get a feel for what is happening by using the developer tools of your web browser so that you can see the code behind your website.

I’m afraid that’s all I can offer. I hope you are successful in finding a solution and will be interested to know how you are able to fix it.

Hi!

I can’t seem to reduce the white space on my website: https://rieredlef.dk/
There is too much space between the end of the content and the hidden footer, or the footer is to big. Anyhow, have tried everything for the past 2 hours – please help?

I don’t know if you got any help, I didn’t so had to work it out for myself. Sorry for not replying sooner but I’ve been away.

I’m unable to comment meaningfully on your post other than saying that everything I learned on the topic is posted here. You may get something from the code I’ve posted. Best of luck to you.

I was having the same problem of applying the fixes mentioned but with no joy. I think the reason is that you must apply the fixes in each of the media sizes. For example,

.site-main{margin-bottom:0}
gets trumped by
@media screen and (min-width: 61.5625em){margin-bottom:7em}

so you have to change it there too.