Space Above Wordpress Footer and Footer Widgets

Can you take a peak at my site at [www.robocomtech.com], specifically focusing on the area above the standard Wordpress footer on any page. There is an area that is maybe 30 pixels in vertical height, that I am unable to eliminate. I have a background image loaded for the widget above the Wordpress footer, that is of sufficient size, but there is a gap between it and the Wordpress footer. The footer itself has the text vertically centered.

The following is my custom CSS for this site, where I focused on #colonphone and sitefooter, but the
text here is vertically centered

When I change the background of the Wordpress standard footer, it shows the space above it clearly.

Any thoughts on what this element is and how to make it go away?

/* Author: Bob O’Neil /
/
Last update: 10-26-18 */

/* mouse over link color in footer */
.footer-widgets a:hover {
color: #1188ff !important;
}

/* Reduce footer size and set color to match Wordpress color */
.site-footer{
padding-top: 0px;
padding-bottom: 0px;
text-align: center !important;
display: block;
background: #252525;
}

/* Wordpress footer /
#colophon {
/
background: #1188ff;*/
padding-top: 0px;
padding-bottom: 0px;
text-align: center !important;
vertical-align: text-top !important;
display: block !important;
}

/* Reduce footer widget padding */
.footer-widgets {
padding: 0px 0;
}

/* Reduce margin for H3 from 50px */
.panel-grid-cell .widget-title {
margin-bottom: 30px;
}

/* Make project thumbnails the same size */
project-item.item img {
height: 135px;
width: 220px;
}

/* add image border to entry thumb class */
.entry-thumb img {
border: 3px solid darkgray;
padding: 3px;
margin: 3px;
}

/* Color for envelope icon used on About Page */
.fa-envelope:before {
color: #1188FF;
}

/* Increase margin above headers from the original 10 px above and 24 below */
h1, h2, h3, h4, h5, h6 {
margin: 24px 0 24px !important;
}

/* Remove percentage from FP Skills Widget */
.perc.show {
visibility: hidden;
}

/* Customize service icons */
.service .icon {
border-color: #FFF;
background: #1188ff;
border-radius: 5px;
}
.service i.fa {
color: #FFF;
}

/* Set text body color for content within accordians to match theme */
.soua-accordion-content {
color: #767676 !important;
}

/* Set background color for Services tab navigation using Limemesh addons */
.lsow-tabs.style3 .lsow-tab-nav {
background: #2f74b0 !important;
border-radius: 5px 5px 0 0;
}

/* Customize GET IN TOUCH call to action button color /
/
Normal state /
.git-cta-button .roll-button.border{
background-color: #1188ff;
border-color: #1188ff;
color: #ffffff !important;
}
/
On hover state */
.git-cta-button .roll-button.border:hover{
background-color: rgba(255, 255, 255, .0);
color: #1188ff !important;
}

/* Firefox Parallax Problem
@-moz-document url-prefix() {
.panel-row-style {
background-position: center !important;
}
} */

Hi,

You can use this CSS code to remove the bottom space of your footer widgets:

.panel-row-style-for-w5bd394f99bc91-1 {
    padding-bottom: 0 !important;
}

HI Awan, thanks for the quick response. Unfortunately, this did not seem to work.

I was poking around in Firefox in development mode, and I added a white background to some of these elements to make sure the CSS was properly targeting them.

I added a CSS entry for the parent of the footer as #sidebar-footer, and the background as white shows up on the site.

The site with white background in place for your preview is at robocomtech.com

Any other ideas? Is the proper element being targeted?

.panel-row-style-for-w5bd394f99bc91-1 {
padding-bottom: 0 !important;
background: white;
}
#sidebar-footer {
padding-bottom: 0 !important;
background: white;
}

Got it! You need to add this CSS code:

.widget-area .widget {
    margin-bottom: 0;
}
.sidebar-column:nth-of-type(2), .sidebar-column:nth-of-type(3) {
    display: none;
}

Thanks, that worked.

Is there a way to make the background image in the footer not perform the scroll or parallax effect but be static?

Here you go:

.panel-row-style-for-w5bd739e696373-1 {
    background-attachment: initial !important;
    background-position: 100% 20% !important;
}

Thanks much, that worked out well.

1 Like