Docs

[JaWright357]

I’m having a problem with my sidebar. On every page that has one, it drops to the bottom when the screen width gets too narrow. What can I do to prevent this? Or at least control where it sits on smaller screens.

[JaWright357]

This reply has been marked as private.

[Jade]

Hi there,

Please add this code in the customizer:

@media (max-width: 979px) {

    .x-sidebar-content-active .x-container.max.width.offset {
        display:flex;
        flex-flow: column;    
    }

    .x-sidebar-content-active aside.x-sidebar.left {
        order: 2;
        margin-top: 20px;
        margin-left: 0;
        padding: 0 4%;
        margin-bottom: 40px;
    }

    .x-sidebar-content-active .x-main.right {
        order: 3;
    }
}

Hope this helps.

[JaWright357]

That does bring the sidebar to the very top of the page. Is there a way to put it instead, just above the footer “contact us” section? Maybe I can instead just drop that section to the bottom instead of moving the sidebar?

[JaWright357]

I managed a work-around/hack for now using position: absolute and a huge negative bottom position. I don’t like it, however. Each page that has a different sidebar has to have different bottom positions, and if content grows it’s likely the positions will have to be changed I think?

I would love to have a better solution if there is one.

[Paul R]

Hi,

You can try this code instead.

@media (max-width: 979px) {
.x-sidebar {
    margin-top: 75px;
    margin-left: 3%;
    width: 15% !important;
}

.x-main.right {
    width: 71.536945% !important;
    float:right;
}
}

Hope that helps

[JaWright357]

Much appreciate it, however I don’t want it permanently attached to the side. It only makes sense for it to move on smaller screens. The problem is I need to control where it moves to when the screen narrows. So far it seems the very top above everything, or at the very bottom below everything seems to be my only options, and neither work out very well.

[Rad]

Hi there,

In that case, would you mind providing mockup designs for each device view? Maybe with finalized look, we can decide which CSS should go for each view.

Thanks.

[Author]

Posts