[Resolved] Spacing between sidebar and footer

[Carl]

Hi team – usually I would be happy to spend a few hours trying to find the solution for this but I am kind of pressed for time with out launch next week! Any solutions for the following issue? When the main content of a page is minimal, the sidebar widgets are compressing into the footer instead of maintaining spacing:

http://bit.ly/2k5CPmd

[Leo]

Hi Carl,

Try this CSS:

.inside-right-sidebar {
    margin-bottom: 30px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know.

[Carl]

Thanks Leo, but unfortunately didn’t change anything.

[Leo]

Weird…Just tested the code and it seems to work for me.

Any chance your site is live?

[Carl]

Yeah it is, this is an example page where I see the problem https://pe.mystudyseries.co.nz/courses/as90962-1-1/

I have just left the office unfortunately!

[Leo]

Don’t think you’ve provided the right page…That page has enough content so that the sidebar doesn’t touch the footer section.

[Carl]

Knew that would happen. I’ll look again when I am at desk and flick through. Only a minor and no big rush. Sorry to be a pain.

[Leo]

No problem. Just provide the correct link and we will solve it 🙂

[Carl]

Ok, I can’t replicate the issue unless the user is logged in. I have two sidebar widgets which grow to accommodate user achievements and site navigation, as per the video below. See what you think.

https://vimeo.com/200304496/db9e9527b0

[Leo]

Are you using a plugin in the sidebar widget to display those items?

Try this CSS:

.widget_ldcoursenavigation {
    margin-bottom: 20px !important;
}

Let me know.

[Carl]

No luck. The widget I am using came with the learndash plugin if that helps..

[Leo]

few more attempts before I go to sleep…
1. Try the code above again – I added !important
2. This CSS should push the sidebar away, but then you would have double the margin when the content is longer..

.site-footer {
    margin-top: 20px;
}

3. Create a temp user for me to log in and see what’s going on when it expands.

[Tom]

As a test, I used developer tools to insert some more content into the widget: https://www.screencast.com/t/ommkOing2u

As you can see, the separator exists. I’m not sure how the plugin is adding content to the sidebar that would make the element ignore the margin. As Leo said, one of us would have to log in to take a look.

[Carl]

Thanks Leo and Tom!

.widget_ldcoursenavigation {
    margin-bottom: 20px !important;
}

That worked a treat! EPIC!

[Leo]

Glad we can help!

[Author]

Posts