Jump to content


Photo
- - - - -

5Px Gap At Bottom Of Footer

footer css gap margin padding

Best Answer beardedavenger , 29 November 2012 - 03:04 PM

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.

Go to the full post


  • Please log in to reply
40 replies to this topic

#21 Danny

Danny

    Is Awesome!

  • Moderators
  • 16313 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 27 November 2012 - 02:13 PM

Olly,

Can you provide a link to the site in question please.

#22 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 27 November 2012 - 04:09 PM

This is in the reset.less file.

Please Login or Register to see this Hidden Content



For some reason, the margin:0 being applied to body is actually doing the reverse. To fix;

1. Create a /less directory in your child theme.
2. COPY (not move) reset.less from pagelines/less into your childs /less directory
3. Remove body from the reset.

Please Login or Register to see this Hidden Content


4. In your style.less, add

body {margin-left:0;margin-right:0;}

Without spending a lot of time I really can't tell you why it's doing that. I haven't seen this pop up on any of the sites I've been doing so that's kinda strange. None the less, hope this helps.

#23 dokether

dokether

    Advanced Member

  • Members


  • 30 posts
  • LocationEdmonton, AB
  • Framework Version:2.4.2
  • Country: Country Flag

Posted 27 November 2012 - 09:35 PM

Hrm.... I did as you asked, and it doesn't seem to have fixed the site. I added the reset.less into the less folder (see attached image) and edited it as you specified. I also re-saved my pagelines settings in the backend to force a re-build of the less documents... and it is still showing that 5-10px at the bottom (you can see the updated css styles in Firebug). I also looked at it in Safari and Chrome and both of those browsers are showing the same thing. Its like the <body> tag is inheriting it from somewhere that Firebug can't identify because its not showing up anywhere. I've also tried turning off all the plugins as per Rob's earlier suggestion and it was still there.

Also, I just downloaded a fresh copy of Wordpress, a fresh copy of Pagelines 2.3.6 and installed both as clean installs with no modifications at all. That gap is there still...

Attached Files



#24 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 28 November 2012 - 05:10 AM

Another case with the same issue has just had a response issue which worked for the user, check out

Please Login or Register to see this Hidden Content



#25 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 28 November 2012 - 02:41 PM

Weird, works for me on the site I'm currently working on. Did you add margin-left:0 and margin-right:0 to your body in less?



#26 dokether

dokether

    Advanced Member

  • Members


  • 30 posts
  • LocationEdmonton, AB
  • Framework Version:2.4.2
  • Country: Country Flag

Posted 28 November 2012 - 04:27 PM

@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:

Please Login or Register to see this Hidden Content



#27 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 28 November 2012 - 04:32 PM

Add to your customcss

Please Login or Register to see this Hidden Content



#28 thejinxters

thejinxters

    Newbie

  • Members
  • 9 posts
  • Country: Country Flag

Posted 28 November 2012 - 07:37 PM

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.



#29 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 28 November 2012 - 07:44 PM

I didn't say 0 i said 8



#30 thejinxters

thejinxters

    Newbie

  • Members
  • 9 posts
  • Country: Country Flag

Posted 28 November 2012 - 07:48 PM

8 doesnt work either.



#31 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 28 November 2012 - 08:41 PM

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



#32 dokether

dokether

    Advanced Member

  • Members


  • 30 posts
  • LocationEdmonton, AB
  • Framework Version:2.4.2
  • Country: Country Flag

Posted 29 November 2012 - 03:23 AM

@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.



#33 Simon_P

Simon_P

    Messer

  • Administrators



  • 8388607 posts
  • LocationDevon
  • Framework Version:2.1.1
  • Country: Country Flag

Posted 29 November 2012 - 04:06 AM

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



#34 dokether

dokether

    Advanced Member

  • Members


  • 30 posts
  • LocationEdmonton, AB
  • Framework Version:2.4.2
  • Country: Country Flag

Posted 29 November 2012 - 06:21 AM

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.



#35 Danny

Danny

    Is Awesome!

  • Moderators
  • 16313 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 29 November 2012 - 08:10 AM

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

 

Please Login or Register to see this Hidden Content



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.



#36 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 29 November 2012 - 03:04 PM   Best Answer

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.



#37 dokether

dokether

    Advanced Member

  • Members


  • 30 posts
  • LocationEdmonton, AB
  • Framework Version:2.4.2
  • Country: Country Flag

Posted 29 November 2012 - 04:17 PM

@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:

Please Login or Register to see this Hidden 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!



#38 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 29 November 2012 - 04:29 PM

Awesome! Glad that worked out for you.



#39 thejinxters

thejinxters

    Newbie

  • Members
  • 9 posts
  • Country: Country Flag

Posted 29 November 2012 - 04:55 PM

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

 

Please Login or Register to see this Hidden 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!



#40 jpuckett

jpuckett

    Newbie

  • Members
  • 7 posts
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 04 December 2012 - 04:06 PM

I am having a similar issue; I documented it with lots of detail in the thread: 

Please Login or Register to see this Hidden Content







Also tagged with one or more of these keywords: footer, css, gap, margin, padding