[Resolved] sidebar visibility and main container on smaller screen

[generatepressuser]

UPDATE:

Hi, I did some changes in the meantime, I hope you did not check it right now ^^
I was kind of unsure what exactly looks better so currently I have activated both sidebars left and right.

And now I think the left sidebar does not have to be hidden when below a certain screen, I now think it would be better when the sidebar just moves below the page, same as it is when its mobile, is that possible?

When you make screen smaller than around 1001px, the left sidebar becomes ugly, thats the reason I would need the sidebar to have at that point to be below the page.

Regards

[Leo]

Ok so just to make sure, the current requirement is to increase the breakpoint when the sidebar moves below the content at 1001px?

And the right sidebar will stay hidden?

[Mark]

Hi Leo,

I’ve seen you mention a couple of times in this thread you could ‘increase the breakpoint when the sidebar moves below the content at 1,XXXpx’, but not seen the code posted to do this yet.

Would it be possible to have this code please?

Specifically, I want the the right sidebar to drop down below the content when site width hits 960px, and for the main content area to stay 780px and centred.

Is this possible?

[Mark]

Disregard the above please, figured out the following in a max width media query does what I need:

#primary, #right-sidebar {
  width: 100% !important;
  float: none !important;
}

[Leo]

Glad you’ve figured out 🙂

[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 768 it does not fit.

How could I solve this?

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;
}
}

[Tom]

Hi there,

Any chance you can open a new topic? This one is quite long.

Let me know 🙂

[generatepressuser]

Hello,

Yes sure I see ^^
I opened a new topic now.
https://generatepress.com/forums/topic/left-sidebar-does-not-fit/

Best regards

[Author]

Posts