reorder main page help

Hi @mp3_dinle!

I understand that you want to change the layout of your products page (http://www.dincplastik.net/urunlerimiz/) in a way that when you’re browsing from a mobile device (or a smaller screen), the categories section is displayed before the products, instead of afterward. Is that right?

If that’s the case, I think that the only way to achieve it would be to add a code like this to your current CSS stylesheet (or in Appearence>Customize>Additional CSS page):

@media (min-width: 768px){
	.woocommerce-page.archive .container .row.is-sidebar-left {
			display: flex;
			flex-direction: column;
			text-align: center;
	}
	.woocommerce-page.archive .container .row.is-sidebar-left .content-area{
		order: 2;
	}
	.woocommerce-page.archive .container .row.is-sidebar-left .woo-sidebar{
		order: 1;
	}
}

I hope it helps!

Hi @mp3_dinle!

I’m sorry, I see now that I made a mistake in that media-query! Instead of “min-width” it should be “max-width”…

I also see that your layout changes when the window is smaller than 992px (moving the sidebar at the bottom of the page), so I think that the 768px should also be updated with 992px.

Here’s the updated code:

@media (max-width: 992px){
	.woocommerce-page.archive .container .row.is-sidebar-left {
			display: flex;
			flex-direction: column;
			text-align: center;
	}
	.woocommerce-page.archive .container .row.is-sidebar-left .content-area{
		order: 2;
	}
	.woocommerce-page.archive .container .row.is-sidebar-left .woo-sidebar{
		order: 1;
	}
}

Please try it and let us know if this time it works fine!

• This reply was modified 6 years, 6 months ago by Bernat Torras (a11n).