0

I'm having issues with some padding/margin issues on a site. It's a WP site that I am building for a client - not my original code. I am using a child theme to customize styles.

My staging site is here http://7a9.007.myftpupload.com/

If you scroll to the bottom there is a white margin between the teal section and the gray/blue footer. Additionally there is excessive top padding on the footer that does not exist on the other pages (for example: http://7a9.007.myftpupload.com/services/)

I want both the white margin and the extra top padding on the footer area removed but checking in chrome developer mode shows nothing to target. What am I missing?

Kristin P
  • 35
  • 1
  • 6
  • 1
    Please add meaningful code and a problem description here. Don't just link to the site that needs fixing - otherwise, this question will lose any value to future visitors once the problem is solved or if the site you're linking to is inaccessible. Posting a [Minimal, Complete, and Verifiable example (MCVE)](http://stackoverflow.com/help/mcve) that demonstrates your problem would help you get better answers. For more info, see [Something on my web site doesn't work. Can I just paste a link to it?](https://meta.stackexchange.com/questions/125997/) Thanks! – j08691 May 03 '17 at 15:19
  • Remove all your unnecessary clearing DIVs and the gap will go away. You only need to a clearing DIV when the previous markup was floated. If that's not true, don't use it. Also, there's better ways to clear floated content than extraneous markup, use a [**clearfix class**](http://nicolasgallagher.com/micro-clearfix-hack/). You're also doing a lot of unnecessary _"shoving"_ around with `position: relative;` as @Win has pointed out in their answer. – hungerstar May 03 '17 at 15:28
  • Thank you for your comment. I didn't code the site however. I'm simply using Visual Composer inside someone else's theme so I'm just trying to fix the issue. – Kristin P May 03 '17 at 15:34
  • In that case, you have my condolences. – hungerstar May 03 '17 at 15:37

2 Answers2

0

Remove the following: margin-bottom: -89px; and top: -149px; it's commented out below, but should give you an idea where to look.

style.css

.home #main-content.trans-header, .page #main-content.trans-header {
    /* margin-bottom: -89px; */
}

layout.css

.home #main-content.trans-header, .page #main-content.trans-header, #archive #main-content.trans-header {
    position: relative;
    /* top: -149px; */
}

#header-wrap {
    position: absolute;
    background: #29333d;
    width: 100%;
}
Win
  • 5,498
  • 2
  • 15
  • 20
  • This appears to work to resolve the footer issues but if i remove the second bit of code it messes up my page header. Since it is transparent it places the header above the header image cotent instead overlapping it and looks quite strange. – Kristin P May 03 '17 at 15:40
0

To reduce the white-space for the both pages, pull the footer up using negative top margin like this:

#footer-widgets {
    margin-top: -100px;
}

And then fix the little bit of white-space between the blue tweets div and the footer on this(http://7a9.007.myftpupload.com/) page, left using the above code:

.vc_custom_1492563370829 {
    margin-bottom: -50px !important;  /*add this*/
    border-bottom-width: 0px !important;
    background-color: #1c89ab !important;
}
Sudipto
  • 440
  • 2
  • 8