Twenty Thirteen Sidebar Overlapping Footer

You need to use a child theme to make any modifications to the default theme – otherwise your changes will all be lost when WP is updated.

https://codex.www.ads-software.com/Child_Themes

It’s also imperative to have an unmodified default theme for troubleshooting purposes.

What’s really funny this was an issue that was brought up while in development. If anything I would really suggest that you try using the 2012 theme and go from there. They are fairly close in layout but the sidebar won’t extend well into the footer.

WPyogi – I just followed the instructions you linked to for creating a ‘Child Theme’ and I believe I’ve successfully created the child theme for the site.

Let me know if there’s any info you can give me that would help my issue with the sidebar overlapping the footer.

Thanks.

Jose – Thanks for the tip – I may switch to Twenty Twelve, but I’m just trying to see if I can work it out with this theme. As I mentioned in my post above I’m happy to just bag the whole sidebar thing and take that content and put it in the main column. Switching to Twenty Twelve is a good idea though…that’s what I run my personal website (https://www.joshrawlings.com/) on.

Thanks guys,
-Josh

Add the following CSS code to the style.css of your child theme

#main {
  margin: 0 auto;
  min-height: 2950px;
  width: 1000px;
}

You’ll have to modify the min-height value if you add or remove widgets in the sidebar.

You have an inline CSS code on the footer, remove that

<footer role="contentinfo" class="site-footer" id="colophon" style="margin-top: 1673px;">

Jesin – thanks for the code, but ideally I’m looking for something that will tell the sidebar widget container to tell the footer container to go directly below it. It seems like it should be a simple fix, but I’m still scratching my head as to how to do it. I like your code because it provides a workaround to add extra height to a page based on how much room you need in the sidebar – but…then it forces the footer way down every page and makes each page very tall.

That said, I found a workaround for myself…

Looking at the CSS with Firebug in FireFox I was able to find the line where the color of the sidebar widget area was defined. I discovered it was using code for RGBA color. Well – messing around with it I realized the last number in the color code informed what level transparency the color should be. I made that number 1 (which I believe means no transparency at all) and now it’s a solid color making the text much easier to read when overlapping the footer section. I’m pleased with this even though it’s not exactly what I wanted. The end result looks like this:

https://thescotchpine.com/support/

And here’s the CSS code I used on my child theme:

/* Sidebar Widget */

.widget {
background-color: rgba(241, 241, 241, 1);
font-size: 14px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
margin: 0 0 24px;
padding: 20px;
word-wrap: break-word;
}

If anyone discovers how to inform the sidebar container to NOT overlap the footer, please let me know, but at this time I’m happy with the alternate fix I came up with.

Thanks,
-Josh

Do you need it for just that one page? If so, then you could ultimately target that page with body_class

The position of the footer is determined by the main content. The sidebar is absolutely positioned so exerts no influence over the rest of the page. Thus if the sidebar is taller than the main content it will overlap (and go beyond) the footer. Setting a minimum height for the main content greater than the height of the sidebar is one solution. You could use javascript to dynamically calculate and apply this (not for small screens which display a single column!!)
Looking at your page the difference in height is too great for a good looking solution – I suggest you re-arrange the page layout or choose a different theme!

Andym – Thanks for your input.

I’m happy with how things are now adjusting the transparency of the sidebar. With my lack of Java Script and overall coding knowledge – I think it’s safe to just lay this issue to rest. I’m going to mark this topic as resolved.

Looks like I’ll have a fun project later learning how to dive deeper into the code and customize this theme more down the road — or create my own..there’s a novel idea!

Thanks all,
-Josh

Whoops – forgot to check the box.

Hi All,

I am using Twentythirteen theme, there is an inline CSS code on the footer which when viewed through firebug shows something like this…

<footer role=”contentinfo” class=”site-footer” id=”colophon” style=”margin-top: 1673px;”>

I tried searching pages in twentythirteen theme but, all my effort in vein, I tried every tactic to remove this inline style but i am not getting the page.

Can please anybody help me out with this issue. Any help will be appreciated.

Thanks All,
Manoj

Hi seattlesurpher, remove the class called “sidebar-container” from sidebar.php, because in twentythirteen default sidebar is having position absolute.

@manoj Karmocha – modifying theme files is not a good idea- all of your changes will be lost when WP is updated. Please start a new thread if you need help.