[Resolved] Left sidebar does not fit

[generatepressuser]

Hello,

When the screen is smaller than 999px , the left sidebar looks ugly.

When the screen is below 768px as mobile view, it looks better. But from 999px until 768px the left sidebar does not fit.

How could I solve this? It would be nice when it looks like 768px already from 999px.

Currently I have a @media which looks as following:

media (max-width: 768px) {
.site-content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}

#left-sidebar {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}

.content-area {
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
-ms-flex-order: 2;
-webkit-order: 2;
order: 2;
}

#right-sidebar {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}
}

[David]

Hi there,

are you actually using the Right Sidebar anywhere ?

[generatepressuser]

Hello,

I have no right sidebar in use, only left sidebar. In the beginning I had a right sidebar but I decided to not use it.

I just noticed something weird, not sure if its related. Inside the customizer its selected “Only Content” with No sidebars, but I am obviously using the left sidebar: https://ibb.co/Fz5xzgS

[David]

Try replacing your CSS with:

@media(max-width: 999px) {
    .site-content {
        display: -webkit-box;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
           -moz-box-orient: vertical;
           -moz-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    #primary, #left-sidebar {
        width: 100%;
        left: unset;
    }
    #left-sidebar {
        -webkit-box-ordinal-group: 0;
        -webkit-order: -1;
           -moz-box-ordinal-group: 0;
            -ms-flex-order: -1;
                order: -1;
        width: 100%;
    }
}

You may want to add the necessary Flex prefixes.

[generatepressuser]

Hello,

Thank you for the solution, now the issue is solved!

I hope the necessary Flex prefixes are set correctly how I did?
I have put them in two places, once in display:flex; and once in order: -1;

@media(max-width: 999px) {
.site-content {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
#primary, #left-sidebar {
width: 100%;
left: unset;
}
#left-sidebar {
-webkit-box-ordinal-group: -1;
-moz-box-ordinal-group: -1;
-ms-flex-order: -1;
-webkit-order: -1;
order: -1;
width: 100%;
}
}

[David]

I updated my CSS to cover all of them 🙂

[generatepressuser]

Thank you, I now updated, there is always something missed when I do it on my own 🙂

Best regards!

[David]

You’re welcome.

[Author]

Posts