Archived topic
Left sidebar does not fit
7 replies · Started by generatepressuser on October 25, 2019
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;
}
}
Hi there,
are you actually using the Right Sidebar anywhere ?
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
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.
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%;
}
}
I updated my CSS to cover all of them :)
Thank you, I now updated, there is always something missed when I do it on my own :)
Best regards!
You're welcome.
