0

I've put quite a lot of stuff on my widget area and now if the post is not long enough my widget area spills in the footer area as shown on the image below:

enter image description here

Now, I'm not a designer, but I have been googling and trying to find out where to exactly place the needed CSS (I found I should use some kind of clearfix solution).

I tried adding <div style="clear:both;"></div> in several places (before the footer, before widgets last closing div, and few random ones), but to no luck.

So, a kind request for help to someone who has maybe dealt with this exact issue already.

My post example is: nikola-breznjak

1

There are many approaches to this. This is because the position: absolute on the sidebar-container is making it overlap over the footer.

Try this CSS to override. This is a static solution:

body.single .hentry // Selects the single posts
{
  min-height: 2000px; // Set this according to the height of the sidebar
}  

This one is a better solution:

To work with only large device width because the below CSS will restructure mobile device elements, To avoid that we can set media-queries

@media (min-width: 992px) { 
  #main {
    overflow: hidden; 
  } 

  #primary.content-area {
    float: left;
  }

  .site-main .sidebar-container {
    position: relative;
    float: right;
    width: 25%;
    height: auto;
    padding: 0 15px;
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.