reducing the height of footer

Shapely
1

Hi,
Currently, I’m using the following code to adjust the height of footer

/* Footer padding (height) */
footer {
    padding: 1px 0;
}

By adjusting “XXpx”, I tried to reduce the height of footer such that it has the same height as header.
However, I found out that the height of footer differs on each page of the webpage. Is there a way to absolutely adjust the height of footer?

2

For example, see:
http://vinnieko.com/met-hartelijke-groente/
http://vinnieko.com/calendar/

3

Hello Vinnie,

I hope you are doing well today.

You can use the following CSS code to adjust the footer by going to Appearance > Customize > Additional CSS and pasting it there.

/*Footer always set to bottom of the page*/
footer#colophon {
    bottom: 0;
    position: absolute;
    padding-left: 150px;
}

Best Regards,
Support

4

Thanks a lot!
The height of header is now reduced. However, when the page Boek – Vinnie Ko is opened on a smartphone, the footer overlaps the main content in the middle of the main content.

I tried some things out and found out that setting
bottom: 1;
solves the issue. However, the height of footer is then significantly increased.
Can you help me solving this issue?

Furthermore, when the webpage is opend on a smartphone,
padding-left: 150px;
forces the footer text to the right and the footer text is now displayed on a multiple lines.