Question posted in
The full documentation can be found here.

Can't get rid of white space under footer on WordPress site using Divi theme

I’m making a site using the Divi theme (elegant themes) in WordPress. I’ve been trying to get rid of the white space under the footer but have been unsuccessful. I’ve tried applying the Sticky Footer CSS and trying different padding/margins in the footer id, html and body. The site is thedaltondaleygroup.org.

I’ve created a page with divi builder and then copied the shortcode from revisions into footer area #1.

Here’s the css code I’ve tried, this is attempting to apply the sticky footer css:

html, body {
  height:100%;
}
#main-content {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
#main-content:after {
  content: "";
  display: block;
}
#main-footer, #main-content:after {
  height: 142px; 
}    
.et_pb_gutters3 .footer-widget {
  margin: 0 .5% 3% 0; */
}

Here’s the rest of the code I have for the footer if there’s anything conflicting:

#main-footer {
  box-shadow: inset 0px 0px 20px 10px rgba(0,0,0,0.3);
  padding-bottom:1%;
}    
.et_pb_row .et_pb_row_3 .et_pb_gutters2 .et_pb_row_fullwidth et_pb_row_1-2_1-4_1-4 {
  width:100%;
  max-width:100%;
}

#footer-bottom .container, #main-footer .container{
  margin-right: 2.773%; 
  margin-left: 2.773%; 
  width:94.454%!important;
  max-width: 94.454%;
}
#main-footer .fwidget.et_pb_widget {
  width: 100%!important;
  max-width: 100%!important;
}
#footer-widgets .footer-widget li:before {
  display: none; 
} 

html #footer-widgets .footer-widget .et_pb_widget:not(.woocommerce) ul li {
  line-height: 26px; 
  padding-left: 0px; 
}

#footer-widgets {
  text-align: center;
  color: #ffffff;
  padding-top: 2%;
  width: 100%;
  height: auto;
}

:not(.et_pb_fullwidth_section).et_pb_section { 
   padding-top: 0px !important; 
   padding-bottom: 0px !important;
}

#footer-bottom {
   padding: 0;
}

#main-footer {
  width: 100%;
  height:auto;
}

/* Footer Columns - Centered */

.footer-widget { margin-right: 0; text-align:center;}
.footer-widget:nth-child(1) { width: 32%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 32%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 32%; margin-right:0;}
.footer-widget+.last{display:none;}

@media only screen and (max-width: 980px){
.footer-widget:nth-child(1) { width: 30%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 30%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 30%; margin-right:0;}}

@media only screen and ( max-width: 767px ) {
.footer-widget:nth-child(1) { width: 100%; padding-right:15px;}
.footer-widget:nth-child(2) { width: 100%; padding-right:15px;}
.footer-widget:nth-child(3) { width: 100%; margin-right:0;}}
Tags:

2

Answers


  1. 0

    Before I write any css code I usually type out html,body,p,h1,h2 { margin:0; padding:0;} etcc…This usually fixes it for me,

    Or you can google a css reset page and they have most of that pre-written…
    hope this helps.

    Login or Signup to reply.
  2. 0

    If you have a menu in the bottom/footer with dropdown menus, make sure in the design>Layout to set "Dropdown Menu" to "Upwards". If not it will cause white space.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search