Docs

[Trang]

Hello, I am trying to make a right sidebar on a portfolio page appear above the content on a phone and tablet – ethos. http://christinesbeautyoffice.com/nail-album/

Regards, Trang.

[Jade]

Hi Trang,

You can add this under Custom > CSS in the Customizer.

@media (max-width: 980px) {
    .x-container>.offset {
        display: -webkit-box;
        display: -moz-box;
        display: box;

        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
    }

    .x-main.left {
        -webkit-box-ordinal-group: 3;
        -moz-box-ordinal-group: 3;
        box-ordinal-group: 3;
    }

    aside.x-sidebar.right {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        box-ordinal-group: 2;   

        margin-bottom: 30px; 
    }
}

Hope this helps.

[Trang]

Hello, thank you that worked beautifully. How can I reduce the space at the top of the sidebar? The gap is a little too large at the moment when viewed on a phone or tablet.

Regards, Trang.

[Paul R]

Hi Trang,

You can add this under Custom > Edit Global CSS in the Customizer.

@media (max-width: 979px) {
body .x-sidebar {
    margin-top: 0px;
}
}

Hope that helps.

[Trang]

Hello, thank you for that. I was so focused on moving the sidebar above content on the portfolio page when viewed on a phone or tablet I hadn’t realised it had moved it on all pages. How do I move it just on the portfolio page and as a supplementary question which is the best way to control the sidebar position across the whole website on individual pages.

Regards, Trang.

[Paul R]

Hi,

You can add page-template-template-layout-portfolio to make it affect only your portfolio index page.

eg.

@media (max-width: 979px) {
.page-template-template-layout-portfolio .x-sidebar {
    margin-top: 0px;
}
}

Hope that helps.

[Trang]

Hello, I have added that but it hasn’t made any difference.

Regards, Trang.

[Paul R]

Hi Trang,

You need to update your other code as well.

eg.

@media (max-width: 980px) {
    .page-template-template-layout-portfolio .x-container>.offset {
        display: -webkit-box;
        display: -moz-box;
        display: box;

        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
    }

    .page-template-template-layout-portfolio .x-main.left {
        -webkit-box-ordinal-group: 3;
        -moz-box-ordinal-group: 3;
        box-ordinal-group: 3;
    }

    .page-template-template-layout-portfolio aside.x-sidebar.right {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        box-ordinal-group: 2;   

        margin-bottom: 30px; 
    }
}

Hope that helps.

[Trang]

Hello, that has fixed it. A great service as usual thank you.

Regards, Trang.

[Joao]

I am glad we managed to help Trang.

Please reach us if you need help with anything else.

Joao

[Author]

Posts