Footer Spacing Issue

• 

  kabutarwalamanish · Member · Apr 28, 2020 at 4:49 pm

  • Copy link
  • Add topic to favorites

  Hello,

  1) I seem to have some extra space between my footer and the body. I don’t know what exactly that is and would like to have it removed.
  2) I want to have my footer stick at the end of the page. Notice that the footer height in different pages of the website. I could add a spacer and move the footer below but that is just a way round and not the permanent solution. I can’t keep on changing the spacer according to the content.

  Thanks,

  The blog I need help with is: (visible only to logged in users)

• 

  alensirola69 · Member · Apr 29, 2020 at 9:05 am

  • Copy link

  Hi,

  Your site seems to be on a Premium Plan, so you can add custom CSS code in Customizer (I found a custom CSS code in browser’s Dev Tools code inspection).

  The extra space between footer and body can be changed by adding CSS code in WordPress.com dashboard > Design > Customize > Additional CSS:

  .footer-top-visible .footer-nav-widgets-wrapper, .footer-top-hidden #site-footer {
      margin-top: 4rem;
  }
  @media (min-width: 700px)
  .footer-top-visible .footer-nav-widgets-wrapper, .footer-top-hidden #site-footer {
      margin-top: 4rem;
  }

  As for the footer sticked to the bottom of the page, the following code will fix a footer to the page bottom, but this also might not work great for all the pages – it depends on how much content each page will load, and the size of footer. But you can test it (add this CSS code to Customizer’s Additional CSS too):

  .footer-top-visible .footer-nav-widgets-wrapper {
      position: fixed;
      z-index: auto;
      bottom: 0;
      width: 100%;
  }

  I hope this will help.

  Cheers

• 

  kabutarwalamanish · Member · Apr 29, 2020 at 2:26 pm

  • Copy link

  @alensirola69,

  Wors like a charm. Thanks.
  But is there a way to hide the Footer unless the pointer does not hover upon it?

  Thanks,

• 

  alensirola69 · Member · Apr 30, 2020 at 8:07 am

  • Copy link

  Hi,

  I’m glad to hear it! :)

  Yes, there is a way to hide the footer on pointer hovering. But are you sure you want that? The footer is really narrow, and there’s minimal space for hover, it might look like accidental when someone crosses over with a pointer …

  You could try and see it for yourself – here’s the code:
  – add this inside the curly brackets of .footer-top-visible .footer-nav-widgets-wrapper selector:

  opacity: 0;
  transition: opacity 0.3s linear;

  Then, add the following code after the closing curly brackets of upper selector:

  .footer-top-visible .footer-nav-widgets-wrapper:hover {
      opacity: 1;
  }

  Perhaps you can change opacity: 0 to 0.5 to make a footer semi-transparent.

  Cheers

• 

  kabutarwalamanish · Member · May 1, 2020 at 1:41 pm

  • Copy link

  @alensirola69

  Again, thanks for your prompt response.

  I tried those CSS and I see what you are talking about. That’s just not going to work. But here is the reason why I want to hide it. When you visit the site on a mobile device the footer is actually covering up the content on a few pages, visit the below pages on a PC and then on a mobile device;
  http://www.motivationoftheday.com/about
  http://www.motivationoftheday.com/archive

  Thanks,

• 

  alensirola69 · Member · May 5, 2020 at 11:57 am

  • Copy link

  Hi,

  Sorry, I wasn’t so prompt again … ;)

  Yes, I see why you wanted to hide the footer. Unfortunately, without heavier customizing (more than just CSS) it just won’t be possible more than “tweak” layout with CSS.

  You might consider discarding a fixed positioned footer for the mobiles, so the content won’t be hidden. Just wrap the code I provided for fixed footer in a media query CSS, so it looks like this:

  
  @media (min-width: 700px) {
  .footer-top-visible .footer-nav-widgets-wrapper {
  position: fixed;
  z-index: auto;
  bottom: 0;
  width: 100%;
  }
  }

  Hope this will help you.

  Have a great day.

• 

  alensirola69 · Member · May 5, 2020 at 11:58 am

  • Copy link

  Hi,

  Sorry, I wasn’t so prompt again … ;)

  Yes, I see why you wanted to hide the footer. Unfortunately, without heavier customizing (more than just CSS) it just won’t be possible more than “tweak” layout with CSS.

  You might consider discarding a fixed positioned footer for the mobiles, so the content won’t be hidden. Just wrap the code I provided for fixed footer in a media query CSS, so it looks like this:

  
  @media (min-width: 700px) {
      .footer-top-visible .footer-nav-widgets-wrapper {
          position: fixed;
          z-index: auto;
          bottom: 0;
          width: 100%;
      }
  }

  Hope this will help you.

  Have a great day.