Move sidebars above content on mobile view

Support
#1

Hi. I’m using Renew and my layout is set to “Sidebar Left, Content Right,” however my sidebars are not displaying above the content on mobile view. I have tried creating various php templates as suggested in the support forums but none seem to work. Help?

#2

Hi there,

Thanks for writing in.

You mean the sidebar is displaying but you wanted to make on top when viewed on mobile? That’s possible, please add this CSS to your global custom CSS.


@media ( max-width: 767px ) {
.page-template-template-layout-sidebar-content-php .x-site > .x-container {
    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;        
}
.page-template-template-layout-sidebar-content-php .x-main{
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    box-ordinal-group: 3;
}
.page-template-template-layout-sidebar-content-php .x-sidebar{
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
}
}

Hope this helps.

#3

Hi, that didn’t work.

#4

Hi There,

Please provide us with the URL to a page that you have sidebar, so that we can check and assist you further.

Thanks!

#6

See secure note

#7

Hi there,

Ah, I thought you’re referring to “Sidebar Left, Content Right,” template. Please change it to this

@media ( max-width: 767px ) {
.blog .x-site > .x-container, .archive .x-site > .x-container {
    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;        
}
.blog .x-main, .archive .x-main{
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    box-ordinal-group: 3;
}
.blog .x-sidebar, .archive .x-sidebar{
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
}
}

Thanks!

#8

This doesn’t work. My sidebars are still not showing before content on mobile.

#9

Hi,

May I know where are you adding the code? I checked your site source code but didn’t see it getting added.

Can you please add it in X > Launch > Options > CSS

If that doesn’t work, please provide us your wordpress admin login in Secure Note

Thanks

#10

The code is added. It doesn’t work.

#11

Hi,

Kindly replace it with this.

@media ( max-width: 767px ) {
.blog  .x-container.offset, .archive .x-container.offset {
    display: -webkit-box;
    display: -moz-box;
    display: box;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;        
}
.blog .x-main, .archive .x-main{
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    box-ordinal-group: 3;
}
.blog .x-sidebar, .archive .x-sidebar{
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
}
}

Thanks

#12

This works!! Thank you so much for your help!! :slight_smile:

#13

Glad we were able to help :slight_smile:

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.