Jump to content
dokether

5Px Gap At Bottom Of Footer

Recommended Posts

dokether

@beardedavenger: Yes, that is what my last post was saying and what the image showed.

 

@James: That unfortunately didn't solve the problem. As per the recommendations in that post I took off the body background and set a normal background color through the Pagelines backend and the footer is still showing as my default bg. You can see the overwhelming pink as the body background for now in case anyone wants to take a look: heartbeing.com

Share this post


Link to post
Share on other sites
Simon

Add to your customcss

#footer {
    padding-bottom: 8px;
}

Share this post


Link to post
Share on other sites
thejinxters

Footer padding-bottom 0px does not work on any of my sites either. Like I said before, padding and margin appear to have no effect on this issue, It appears to be something to do with the latest release of pagelines. Maybe it is code error in the programming as was suggested by ROB? It's not something in the custom code.

Share this post


Link to post
Share on other sites
Simon

I didn't say 0 i said 8

Share this post


Link to post
Share on other sites
Simon

Can you add the code to your custom css so i can see it live?

Share this post


Link to post
Share on other sites
dokether

@Simon_P: the padding-bottom: 8px is now live on heartbeing.com. The bottom bar still exists though. Now, however, instead of being pink (the body bg color) it is the dark grey of the footer background.

Share this post


Link to post
Share on other sites
Simon

So why not remove that, and just make the body{} the same color as your footer?

Share this post


Link to post
Share on other sites
dokether

The point is that the theme isn't really working the way it should. Working around/compensating for 7px of dead space isn't hard. I was asking the question because I couldn't figure out why it was doing this and figured that it was something that the dev team should be made aware of since I couldn't find anything in my own code that was causing it which has been further re-iterated throughout this thread.

Share this post


Link to post
Share on other sites
Danny

If you wish to color your background, just change the color of your body ?

 

If you're using Full Width Sections, look at the image for the setting

 

http://d.pr/i/gdQT

As you can see, it says body/footer. Therefore if you wish to add a color to your footer area, simply add a color to your body in color control. If I remove the image from your footer and #333, I can see the magenta you have set for  your body background color.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
beardedavenger

Oookey dokey. This one was a bugger, but I found the issue. It lies within the .fix:: after in the #footer .outline. So to fix this, remove whatever padding you have on the #footer. Then do this

 

#footer .outline.fix::after{content:"";}

 

Currently, that content has content:".", and that period is throwing everything off.

 

I tested this in the head of your site and indeed corrects it. Let us know how you go about.


Something big is coming for DMS + photographers.

http://fotostheme.com

 

Nick Haskins & CO - New home for all of my PageLines Store products! 

http://nickhaskins.co

 

Better DMS - News, Tutorials, and Tips

http://betterdms.com

 

Share this post


Link to post
Share on other sites
dokether

@beardedavenger: thank you so much! That was definitely what the problem was. For some reason the site wasn't reading the style properly with the .outline.fix, so the line that solved it for me was:

#footer .fix:after{content:"";}

I know you were trying to specify it for only that one div (I turned it off/on with firebug), but for some reason .outline.fix wasn't being recognized... Firebug was showing the normal .fix being applied and then a second :after being applied (content:"" wasn't overwriting the previous one in other words).

 

Either way, problem solved, thank you so much!

Share this post


Link to post
Share on other sites
thejinxters

Agreed! class outline doesnt work, but just .fix works.

 

#footer .fix:after{content:"";}

This seemed to fix the gap. Thanks bearededavenger and dokether. Dev team, maybe this is something you can fix in the next release of pagelines so we don't have to add this custom code every time we install and want the footer to be a different color than our background. Thanks again guys!

Share this post


Link to post
Share on other sites
James B

For anyone new who's experiencing the 5px gap at the bottom of the footer, this will be rectified on the 2.3.7 update, which will be available shortly.

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • chamois_blanc
      By chamois_blanc+
      Hello,
      Shouldn't the image PL5 component be using the srcset/picture css directives to pick the correct size for an image? or it does already and I don't know how to use it? Thank you for any advice or enlightenment.
    • Paul
      By Paul+
      I was surprised to see I had no menu today - out of the blue - its actually moved to the bottom of the page!  After hours of fiddling and disabling every single plugin, leaving just plagelines the issue is still present.  See video for a basic text box - I moved it into the head and it jumps to the bottom and shows just above the footer but below the main content.  I have a temp fix by placing the menu into the first row on the main content but it does mean other than my home page, all other pages have no menu.  A quick fix is very urgent for this bug.
      https://thelaptopfixers.com
       
       
    • Dan Haddock
      By Dan Haddock
      Plugins Active and installed: 
      Akismet Anti-Spam
      Coming Soon Page & Maintenance Mode by SeedProd
      Contact Form 7
      Cookie Law Info
      DMS Professional Tools  
      Enhanced Media Library  
      Flamingo
      Google Analytics for WordPress by MonsterInsights
      Google XML Sitemap
      Jetpack by WordPress.com
      Legull 
      Loginizer   
      MailChimp for WordPress
      PageLines Updater    
      Schema App Structured Data 
      Sucuri Security - Auditing, Malware Scanner and Hardening
      Uber reCaptcha    
      Yoast SEO
      Wordpress Version: 4.8.1
      Pagelines Version: 2.2.4
       
      Good Evening/Afternoon or Morning, 
      I am running into a problem with CSS styling not applying inside of most browsers (Safari, Firefox) when I am logged in to wordpress, and all browsers that I have tested when I am logged off and the site has been made public (Chrome, Firefox and Safari).
      As a result, I have managed to identify the probable cause. It looks as though these browsers are refusing to render my sites compiled CSS file due to it being a HTTP URL rather than HTTPS.
      I have attempted to change this URL to HTTPS in my browser, however it brings back an ERROR: File not found page - https://www.shortfilmblog.com/wp-content/uploads/pagelines/compiled-css-core-1505847507.css
      What would you suggest in this regard? Would this be resolvable from your end?
      Happy to provide any further details required.
    • Borries
      By Borries+
      I know this is not an easy problem. Maybe there is a easy solution.
      I have tryed to uses the existing solution, that I have found in the forum
      I changed the colours of my nav (simple nav) and the hover effect (a. hover).
      I really tryed to highlight the active/used link in the nav but I cant figure it out.
      I want it to be black when active.
      Any help would be appreciated. Thanks.
      http://www.marcborries.de  nav link: "Sinn & Selbst" 
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      every since Chrome introduce scroll anchoring (see chrome://flags) blog posts on my page start scroll automatically as soon as the user scrolls down a bit. It is super annoying and I don't know exactly what triggers the incompatibility with Chrome's latest feature that is supposed to improve usability.
      Since I don't know what causes it (Pagelines, or a Plugin), I would like to disable the feature using a CSS override that Google describes as follow:
      "Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. A CSS property overflow-anchor can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm. This property supports the following values when applied to an element E:
      overflow-anchor: auto (the default value) declares that the DOM subtree rooted at E is eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E. overflow-anchor: none declares that the DOM subtree rooted at E is not eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E." Do you guys happen to know how to use that property with the ROOT element so it applies to the whole page?
      Thanks
      Michael 
×