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

    • gstrahle
      By gstrahle+
      Hi,
      I am hoping to figure out how I can get my PageLines Full Nav to display layered in front of a sticky footer element on my website - 3keymedia.com
      I would like the Full Nav to overlay the entire screen when opening the menu as you will see when opening on a desktop the footer of nav content is cropped by the sticky footer.
       
      Thanks


    • Christian
      By Christian+
      Hi everyone, since Instagram had allowed to publish in different ratio formats (instead of only square ratio) the grams stripe has different heights. Can you tell me if i can fix it easily with some CSS?
    • yasinyaqoobi
      By yasinyaqoobi
      In the footer of my website, I can't find where Leasing is located. I have to remove it.
       
      http://grandavenueshops.com/
       
       
    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I have noticed that my primary sidebar becomes intermittently invisible when browsing through various blog articles on michaelkummer.com/blog.
      See:
      https://www.dropbox.com/s/z646sgoa3mfjl1j/Screenshot 2018-07-12 15.57.46.jpg?dl=0 and https://www.dropbox.com/s/vdledzzgginvwgv/Screenshot 2018-07-12 15.57.57.jpg?dl=0
      Upon refresh, the sidebar appears. I have been using the following CSS code to hide the sidebar on mobile without any issues. 
      @media only screen and (max-width: 993px) {
      /* hide sidebars */
           .plsb {
              display: none !important;
          }
      }
      I tried to add the following CSS to force the sidebar to show on screens that are wider than 994 pixels but to no avail. Any clue what could be causing this issue?
    • Michael Kummer
      By Michael Kummer+
      Hi guys!
      I am using the LESS/CSS Pagelines extension and tried to add the following code to make use of FontAwesome:
      a.c2a:before {
          content: "\f07a\00a0";
          font-family: "Font Awesome 5 Pro";
          Font-weight: 900;
          font-style: normal;
          font-weight: normal;
          text-decoration: inherit;
          padding-left: 4px;
      }
       
      The issue is that as soon as I have the CSS via the Custom Styling text box, Pagelines (or the extension) strips out the backslashes (\). As a result, I had to abandon the CSS/LESS extension and instead add all my CSS code to a separate .css file.
      Is there a fix or workaround for this?
      Thanks
      Michael
×