Sidebar on top on mobile

  • Resolved killerisko

    (@killerisko)


    3 years, 9 months ago

    Hello, I can’t find a solution to show widgets above the main content in mobile view.

    How can I get widgets to show before the post or page content?

    I got this code but its only working with a single product page. If I want to show widgets first everywhere else on mobile? Like main shop page, specific category page, specific tag page etc etc

    @media(max-width:767px){
.single-product #content-area {
display: flex;
flex-direction: column;
}

.single-product #left-area {
order: 2;
}

.single-product #sidebar {
order: 1;
}
}

    Can someone help me with what to add to this code?

    • This topic was modified 3 years, 9 months ago by killerisko.

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Gabriel – a11n

    (@gabrielfuentes)

    Hi there ??

    I’ve tweaked your code a little bit and it works now. Add this under Customize > Additional CSS, you can add the following code:
    ?

    /* Change products sidebar order on mobile */
@media(max-width:767px){
    .woocommerce-page #content-area {
        display: flex !important;
        flex-direction: column !important;
    }
    .woocommerce-page #left-area {
        order: 2 !important;
    }
    .woocommerce-page  #sidebar {
        order: 1!important;
    }
}

    Results:

    https://www.screencast.com/t/aWStIEO1

    If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

    Cheers ??

    Thread Starter killerisko

    (@killerisko)

    You are a genius! Thanks for your help Mr. Gabriel. Works perfectly!

    Plugin Support Gabriel – a11n

    (@gabrielfuentes)

    You are most welcome! Happy to help ??

    Great! If you have any other questions, you can start a new topic.

    Cheers.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Sidebar on top on mobile’ is closed to new replies.