Filter Moved to top on Mobile

Support
#1

Hi there, I have a widget on the right hand side of the page. https://www.greatstairs.com/product/spindles/
When it goes to mobile mode, I wan that widget placed to the top instead of at the bottom.
Any idea how I can do that?

#2

Hello Ashley,

There is no out of the box option to change the order of the sidebar and the main content area on mobile but that is possible by adding some custom codes in the Global CSS. Please try this:

@media (max-width: 980px) {
    .archive.woocommerce .x-container.offset {
        display: flex;
        flex-direction: column;
    }

    .archive.woocommerce .x-container.offset .x-main {
        order: 2;
    }

    .archive.woocommerce .x-container.offset .x-sidebar {
        order: 1;
    }
}

The code above will move the sidebar contents before the main content area on mobile view for the main Woocommerce product pages.

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

#3

This works! Thank you!

#4

Glad to hear that. :slight_smile:

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.