0

My theme automatically puts the sidebar above the content rather than below it when going responsive/mobile.

I am trying to figure out how I can get it to go below the content instead, as having it above is really hurting customer experience because they have to scroll so much to see the product.

This is the demo of the theme I am using which shows the issue: http://sooperstore.themesforge.com/shop/twist-bandeau-bikini-top/

Is there a bit of CSS code I can add which will force a rearrange so the content is shown above the sidebar when it goes responsive?

  • yes #John css will work here.. – Mukii kumar Apr 27 '17 at 6:26
3

Depending on which device you want to target, you'll need to use a media query, you can read more about those here: CssTrick:

@media only screen and (max-width : 320px) {
    #content { 
      display: flex; 
      /* Optional, if you want the DIVs 100% width: */ 
      flex-direction: column;
    }
    #content > .wooside { order: 1; }
    #content > .nine { order: 2; }
}   

Hope you understand!!

0

To achieve this you can use below custom CSS code on your site using this free WordPress plugin https://wordpress.org/plugins/simple-custom-css/

@media only screen and (max-width : 767px) { 

    #content { 
        display: flex; 
        flex-direction: column;
    } 

    #content > .three.first { 
        order: 2; 
    } 

    #content > .nine { 
        order: 1; 
    } 
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.