Move right sidebar to top on mobile

Support
#1

Hi,
How can I move the right sidebar from the bottom of the page to the top on mobile? Here is my website and the specific page I’m trying to adjust: https://feheleyfinearts.com/artwork/

Thanks,
Renzo.

#2

Hello Renzo,

Thanks for writing to us.

I suggest adding the following custom CSS code to the Global CSS to position the shop page sidebar at the top for small screens.

@media (max-width: 768px) {
/* Make the parent a flex container */
.woocommerce-shop.post-type-archive-product .site-main {  /* replace .container with your actual parent selector */
display: flex;
flex-direction: column;
}

/* Sidebar first */
.woocommerce-shop.post-type-archive-product .x-sidebar.right {
order: 1; /* Display first */
}

/* Main content second */
.woocommerce-shop.post-type-archive-product .x-main.left {
order: 2; /* Display second */
}
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector, or you can subscribe to One, where customization questions are answered.

Hope it helps.
Thanks