Empty space between entry and footer

Shapely
1

Hello,
I have some empty space after the content and above the footer of two pages on my site.
www.calvindesign.com/journey
page id 107
www.calvindesign.com/resume
page id 57

I’ve tried,

.page {
margin-bottom: -10rem;
}

But that takes takes out space on all my pages and the footer ends up covering content on some of the other pages.
So I tried,

.page-id-57,
.page-id-107 {
margin-bottom: -10rem;
}

But that doesn’t seem to work.

Please help.

Thanks,
Calvin

2

Try this in your additional css: (and change the px value if necessary)


/*Change Footer size*/
footer {
         padding-top:1px;
	 padding-bottom:40px;}

/*to get rid of that entry-footer */
.entry-footer {
		display:none;	}

let me know if it has worked out for you

Cheers
Chris

3

Hi Timbochris,
Actually it’s not the black footer that I was trying to reduce the space in. It’s the white space above the black bar and below the page content. I don’t have a problem with the spacing for the black bar footer. Although the css you gave will come in handy. Can you help me with the space between the copy/images in the page and the top of the black footer section?

Thanks
Calvin

4

I may be asking the wrong question. I would like to control the white space between the content and the top of the black bar. For instance,

.page {
margin-bottom: -10rem;
}
was able to move the black bar up as much as I wanted by adjusting the rem value. The problem was it did it for every page blindly. That’s why I tried putting in the page ID and it didn’t do anything.

Thanks,
Calvin

5

If I get you right, its the “white space” between your contents and the footer.

Have you tried the css I gave you regarding the entry-footer?


.entry-footer {
		display:none;	}

Because if I look at the pages you quoted above (the two links) it´s exactly the so called entry-footer there that causes the space.

Or did I misunderstand you?

Cheers
Chris

6

Hi Chris,
Yes you are correct, that code gets rid of a lot of the white space. Is there a way to control that css? It’s either on or off without a chance to tell it a little or more space please.

Hope I’m not being a pain.

Thanks,
Calvin

7

First of all you are not a pain in the a** :slight_smile:
I am also kind of new to wordpress as I am used to other CMS systems. And this colorlib community is awesome and I like the free themes and the support of those very much and appreciate it of course.

So if I can help, I am happy, because I still hope that someone can also help me with my issue :slight_smile:

Back to your question:

I guess this should work out for you:


 .entry-footer {
		padding: 30px;	}

Just test it what fits best for you.
To shorten the code, it is possible to specify all the padding properties in one property.
The padding property is a shorthand property for the following individual padding properties:

padding-top
padding-right
padding-bottom
padding-left


Example
p {
    padding: 50px 30px 50px 80px;
}

Hope that helps
Cheers
Chris

8

Hey Chris,
I do the same thing, I try to help hoping it comes around when I need it. Have to send out those positive vibes into the world to balance things out.

This my first site using Wordpress and it’s not as easy as I thought. A lot more coding then to get things just right. The other day I spent an hour trying to figure out how to put a border around my images. I’m also trying to avoid using too many plugins and the simplest css as possible.

So here’s what I did,
I combined your code with one I had before and it looks like this,

.entry-footer {
margin-bottom: -5rem;}

Now I have control over how much the footer moves vertically beyond the {padding: 0px;}. I like to tweak stuff to get things proportional (designer) so {margin-bottom: -5rem} allows me to go negative and past the 0px.

I wonder why .page-id-57 didn’t work? It seems to be a common way to directly affect a specific page. That would have been very useful.

Now I have to figure out an rem unit is.

I couldn’t have done it without you. Thanks so much!

9

Oh wait, it does work,
I tried:

.page-id-57 .entry-footer {
		padding: 0px;
margin-bottom: -5rem;}

And it does work on the individual pages!

Cool!!!

10

So I did a little research and length units most units allow for allow for negative values in css, but rem seems to be a newer unit that works on newer browsers only.

https://www.w3schools.com/cssref/css_units.asp

Hope this helps someone.