Jump to content
dokether

5Px Gap At Bottom Of Footer

Recommended Posts

dokether    4
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    247
Simon

Add to your customcss

#footer {
    padding-bottom: 8px;
}

Share this post


Link to post
Share on other sites
thejinxters    1
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    247
Simon

I didn't say 0 i said 8

Share this post


Link to post
Share on other sites
Simon    247
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    4
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    247
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    4
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    1,327
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    158
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    4
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    1
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    436
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

    • 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 
    • wyo22ski
      By wyo22ski+
      Hello,
       
      I'm basically a designer and understand a little on how to change CSS, etc., so please excuse my ignorance...  I recently upgraded to the newest platform from the DMS and my old DMS theme no longer functions.  I'm trying to replace the image slider that my Horizon Photography Theme (Nick Haskins) had created.  The Impulse image slider seemed the closest to what I need, but there are problems.
      It seems the the Impulse section for sliding images defaults to the image width, no the height.  I can change the Impulse stage height and width, but this does nothing to the internal content.  For instance, if I change the height to 200 pixels, the image remains the full width and only shows a cropped section.  I would like the ability to change the Impulse height, and have the image height fit space. 
      I've put this custom CSS in, but again, this only controls the stage height of Impulse:
      .pl-sn-impulse .pl-impulse-cell .cell-wrap, .pl-impulse-container, .owl-stage-outer {
        width: 100%;
      }
       
      Any suggestions welcome.  Thanks 
    • Objectif-Mariage
      By Objectif-Mariage+
      Hello. 
      I have just realized that CSS (Less plugin) , is not working..... I have disable all plugins (except PL CUSTOM LESS and PL5) , and ... it's not working ... 
      It's not the first time. Usually I had trouble with a plugin name Autoptimize , but it's Desactivate now , all memory have been purge, and it's still not working! :-/ So it's not from this plugin. 
      NB : When I am logged on my website, if i go on the black wordpress dashboard bar, go on the PL icon, clic on </> LESS/CSS => then the page suddenly apply the CSS .... But As soon that i reload the page, nothing. I think the problem is that the plugin LESS/CSS does not load properly (if I can say that with my simples words).
      I order to keep the site "good looking" I have temporally copy/paste all my LESS code in a plugin : Script n Styles that apply the LESS/CSS code... but it's not a solution for long time.
      Can someone help me ? Did I do something wrong ? Is it an update ? 
       
      my website : https://www.wedding-photography-minneapolis.com
    • Jason
      By Jason+
      Feel free to delete this post if its not helpful or its just plain wrong.
       
      I though it might be useful to share how I customize the size of the builder. (reduce my eyestrain )
      1 - install stylerbot extension in chrome (stylerbot keeps this css every time you access the url)
       
      2- add this css to stylerbot for the site you are working on
      .CodeMirror {
          font-size: 14px;
          height: 600px;
      }
      .pl-workarea.pl-has-sidebar .pl-workarea-sidebar-container {
          right: 0px;
          width: 500px;
      }
      .pl-workarea.pl-has-sidebar .iframe-container {
          right: 500px ;
      }
       
      change sizes to suit.
       
      Cheers.
    • Jason
      By Jason+
      Hi.
      I can't seem to get the Teamwork section to accept custom css. I am trying to change the padding from 7em to 1em on the splash part
      I have tried
        .pl-sn-teamwork .pl-tw-splash {
          padding-top: 1em;
          padding-bottom: 1em;
        }
       
      This works in chrome inspect but when added to custom css nothing happens.
      I have also tried most of the classes I can see accoiated with this section but again nothng seems to happen.
      Any ideas?
×