Right side bar moving to bottom of page

Hi there,

You can try this CSS to resolve the layout :

@media(min-width: 768px) {
    .right-sidebar.archive .container.grid-container {
        display: flex;
        padding: 40px 40px 0 0;
        box-sizing: border-box;
    }

    .right-sidebar.archive .site-content {
        width: 75%;
    }

    .right-sidebar.archive #primary {
        width: 100%;
    }
}

Perfect! Thank you!

You're welcome

Hi David

The CSS adds a sidebar at the sort and display categories where it moved to the bottom because of the plugin. However on the other pages where the sidebar showed in the right place it now moves the sidebar to the bottom.

Thanks
Helmke

Ooops - i updated the CSS above so it only applies to the Archives.

Thank you - its working now :)

Glad to hear that

Hi David

I have done some more testing.

If your CSS snippet is disabled:
Non-archive pages - sidebar shows correctly
Archive pages with subcategories - sidebar moves to the bottom
Archive pages without subcategories - sidebar shows correctly

If your CSS snippet is enabled:
Non-archive pages - sidebar shows correctly
Archive pages with subcategories - sidebar shows correctly
Archive pages without subcategories - sidebar moves to the bottom

Is there perhaps a way around this?

Can you point me to an Archive without Subcategories ( with my CSS in place )?

Sure

I have edited the URL in this ticket to a child category.

Thats a tricky one.
The original issue with the archives looks like the some broken HTML was injected into those archive content - which is what caused the layout to break. There are several elements coming from the Product Sort and Display plugin that look like this:

<div class="psad_seperator products_categories_row" style="clear:both;"></div>

I would hazard a guess it is one of them that is causing the issue. an Extra DIV or Missing DIV in their markup

When i look at the archives that have no sub-categories that markup is not present. And our Fix CSS now breaks those pages.

Do you know what these are:
<div class="psad_seperator products_categories_row" style="clear:both;"></div>

And what there purpose is?

Hi David

Thank you for the feedback. I will do some research on this issue.

Let us know.

The issue has been resolved on the dev site.

There was a compatibility issue with the WooCommerce module of the GP Premium add-on. Product Sort & Display is releasing a new version for their plugin with the fix tomorrow.

Thanks again for pointing me in the right direction.