• Resolved mp3_dinle

    (@mp3_dinle)


    I’m using a mobile-compatible theme and when I enter it from mobile, How can I do if I want the first categories then the products in page show?

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Hi @mp3_dinle!

    I understand that you want to change the layout of your products page (https://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!

    Thread Starter mp3_dinle

    (@mp3_dinle)

    Now, the desktop view is broken. The products is below the categories.

    • This reply was modified 5 years, 1 month ago by mp3_dinle.
    • This reply was modified 5 years, 1 month ago by mp3_dinle.

    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!

    Thread Starter mp3_dinle

    (@mp3_dinle)

    Yes, it works fine. Really thanks you.

    Thread Starter mp3_dinle

    (@mp3_dinle)

    Is it possible to remove url from your comment, thanks matter
    @bernattorras

    • This reply was modified 5 years, 1 month ago by mp3_dinle.
    Moderator Jan Dembowski

    (@jdembowski)

    Forum Moderator and Brute Squad

    I’m sorry, but URLs are not edited unless it is an extreme case. This is not an extreme case and the URL will not be removed.

    https://www.ads-software.com/support/forum-user-guide/faq/#my-post-shows-up-on-a-search-for-my-domain-will-you-delete-my-post-or-my-link

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘reorder main page help’ is closed to new replies.