Olly,
Can you provide a link to the site in question please.
5Px Gap At Bottom Of Footer
Started by
dokether
, Nov 23 2012 08:04 PM
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
40 replies to this topic
#21
Danny
-
- Moderators
-
- 7,481 posts
Ninja
- LocationManchester, UK
-
Country:
Posted 27 November 2012 - 02:13 PM
#22
beardedavenger
-
- Members
-
- 798 posts
Unicorn Wrangler
-
Country:
Posted 27 November 2012 - 04:09 PM
This is in the reset.less file.
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.
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.
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.
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
-
- Members
- 28 posts
Member
- LocationEdmonton, AB
- Framework Version:2.4.2
-
Country:
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...
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
-
heart_being_LESS.jpg 77.38K 5 downloads
#24
James B
-
- Moderators
-
- 2,417 posts
Advocate
- LocationSurrey - UK
-
Country:
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
#25
beardedavenger
-
- Members
-
- 798 posts
Unicorn Wrangler
-
Country:
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
-
- Members
- 28 posts
Member
- LocationEdmonton, AB
- Framework Version:2.4.2
-
Country:
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:
#27
Simon_P
-
- Administrators
-
- 5,067 posts
Messer
- LocationDevon
- Framework Version:trunk
-
Country:
Posted 28 November 2012 - 04:32 PM
Add to your customcss
#28
thejinxters
-
- Members
- 9 posts
Newbie
-
Country:
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
-
- Administrators
-
- 5,067 posts
Messer
- LocationDevon
- Framework Version:trunk
-
Country:
Posted 28 November 2012 - 07:44 PM
I didn't say 0 i said 8
#30
thejinxters
-
- Members
- 9 posts
Newbie
-
Country:
Posted 28 November 2012 - 07:48 PM
8 doesnt work either.
#31
Simon_P
-
- Administrators
-
- 5,067 posts
Messer
- LocationDevon
- Framework Version:trunk
-
Country:
Posted 28 November 2012 - 08:41 PM
Can you add the code to your custom css so i can see it live?
#32
dokether
-
- Members
- 28 posts
Member
- LocationEdmonton, AB
- Framework Version:2.4.2
-
Country:
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
-
- Administrators
-
- 5,067 posts
Messer
- LocationDevon
- Framework Version:trunk
-
Country:
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
-
- Members
- 28 posts
Member
- LocationEdmonton, AB
- Framework Version:2.4.2
-
Country:
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
-
- Moderators
-
- 7,481 posts
Ninja
- LocationManchester, UK
-
Country:
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
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
-
- Members
-
- 798 posts
Unicorn Wrangler
-
Country:
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
-
- Members
- 28 posts
Member
- LocationEdmonton, AB
- Framework Version:2.4.2
-
Country:
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:
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
-
- Members
-
- 798 posts
Unicorn Wrangler
-
Country:
Posted 29 November 2012 - 04:29 PM
Awesome! Glad that worked out for you.
#39
thejinxters
-
- Members
- 9 posts
Newbie
-
Country:
Posted 29 November 2012 - 04:55 PM
Agreed! class outline doesnt work, but just .fix works.
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
-
- Members
- 7 posts
Newbie
- Framework Version:2.3.6
-
Country:
Posted 04 December 2012 - 04:06 PM
I am having a similar issue; I documented it with lots of detail in the thread:
Also tagged with one or more of these keywords: footer, css, gap, margin, padding
PageLines Framework →
Customizations →
Header and Footer expansion customizationsStarted by casseysdesigns , Yesterday, 05:50 PM  Header, Footer, Customization and 3 more...
|
|
|
||
PageLines Framework →
Customizations →
header image trough header+contentStarted by helvetik_a , Yesterday, 11:37 AM header image selector, css and 1 more...
|
|
|
||
PageLines Framework →
Customizations →
Custom BrandNavStarted by Jarrod H , 17 May 2013 BrandNav, CSS
|
|
|
||
 Answered
PageLines Framework →
Customizations →
Customizing AccordionStarted by mudgal , 17 May 2013 customization, accordion, css and 1 more...
|
|
|
||
PageLines Framework →
Technical Support →
Left margin on content is clearedStarted by sierrapat , 15 May 2013 content, left margin, css
|
|
|
