Responsivity Woocommerce – footer and body content overlap

[Rolf Espen]

Rolf Espen

August 21, 2015 at 9:34 am

Hi,

Thank you again for a wonderful theme, and great support!

I am having some issues again when on a smaller screen.
For the footer I am using all 4 columns, and after putting in widgets here there are a few problems when viewing on smaller screens.
The body content eihter falls under the footer or is placed on top.
Previously I had some issues with the footer when working on my computer screen, so I added som codes I found, and now I am unsure how to fix it.

I want to keep the spacing between the body content and footer like I have it now on the computer screen, and obviously make it not overlap or disapear on the smaller screens.

Including some photos.

Picture 1 – Spacing between body content and footer – computer screen
Picture 2 – Spacing between body content and footer – mobile screen
Picture 3 – Spacing between body content and footer – mobile screen
Picture 4 – Spacing between body content and footer – mobile screen

My Custom CSS looks like this:

.page-header {
display: none;
}

html, body {padding:0; margin:0; height:100%;}
#wrapper {position: relative; min-height:100%;}
#containerfooter {position: absolute; bottom: 0; left: 0; right: 0;}
.contentclass {padding-bottom:300px;}

#nav-main ul.sf-menu li ul.sf-dropdown-menu li a:hover {color:#f2a79d;}

@media (min-width: 992px) {
#nav-second ul.sf-menu {
display: none;
}
.page-id-34 #nav-second ul.sf-menu {
display: block;
}
}

.sf-menu ul, .sf-menu li:hover ul, .sf-menu li.sfHover ul {width: 140px;}

a:focus {
outline: none;
}

@media (min-width: 992px){
#nav-second ul.sf-menu>li {
width: auto;
padding-right: 15px;
padding-left: 15px;
}
}

@media (min-width: 1200px) {
#nav-second ul.sf-menu>li {
width: auto;
padding-right: 30px;
padding-left: 30px;
}
}

.products div.product {
border:none;
}

#nav-main ul.sf-menu {
margin-top: 50px;
margin-bottom: 0px;
}

[class*=”post”] { border:none !important; }
#kad-blog-grid .blog_item {
border: 0;
}

.footerclass h3 {
font-size: 16px;
}

.footerclass {
font-size: 12px;
}

.footernav ul li a:hover {
background: none;
}

#containerfooter .menu li a {
background: 0;
}

.footerclass a:hover {
color: #fff;
}

.footer-widget .widget, .footer-widget {
margin-top:0;
}
#containerfooter {
padding-top: 10;
}
.footercredits {
padding-top: 10;
padding-bottom: 0;
}

#containerfooter .menu {
margin: -8px;
}

Anyone able to help with this as soon as possible? 🙂