[Resolved] Change Breakpoint of Left Sidebar

[Chris]

Hello,

I am trying to change the breakpoint for 2 items in unison:

1. The point at which the top navigation becomes mobile – which I found directions for here:

https://gist.github.com/generatepress/282078076cd8631c17717d5b8640c043

2. The point at which the left sidebar disappears (I want it to happen sooner). I cant seem to find any information for this one. Can you tell me the proper way to do it without destroying the rest of the theme.

I am using a 3 column layout (left and right sidebars) – here is the test site:
http://www.internationallovescout.info

Thanks

[David]

Hi Chris, this is the CSS that controls the stacking of the sidebars and widgets:

@media (max-width: 768px) {
    .content-area, .inside-footer-widgets>div, .sidebar {
        float: none;
        width: 100%;
        left: 0;
        right: 0;
    }
}

[Chris]

Thanks for the reply.

I tried putting the css in simple css and changing the max-width number both higher and lower but it doesn’t seem to have any effect. I also added “!important” to the individual css items.

Also, I would like to change the breakpoint ONLY for the left sidebar. The code above looks like it will change the break point for both left and right sidebar. Is there a way to target only the left sidebar?

Thanks

[Chris]

Actually I figured out the first part of the problem and it works as expected now – I was missing the opening “{”

But the 2nd half still applies. How can I target only the left sidebar?

Thanks!

[David]

Hi Chris,

OK, slightly more complicated, instead of the code above, we can try using a flex box – just need to set the max and minimum widths that you want the layout to work with:

@media (max-width: 768px) and (min-width: 500px) {
	.site-content {
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
 	}
    
	#left-sidebar {
		order: 3;
		width: 100%;
		left: 0;

	}
    
	.content-area {   
		-webkit-order: 2;  
		order: 1;
		width: 70%;
		left: 0;

	}

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

[Chris]

That works great for the left sidebar – but now the right sidebar doesn’t disappear anymore. Is there a way to control the right breakpoint too, or to have it disappear at it’s original breakpoint?

Thanks!

[David]

Hi Chris, adjust the break point heights, with min width set to 768px like so:

@media (max-width: 900px) and (min-width: 768px)

[Chris]

I still can’t get this to work.

I broke the css above into 3 sections; right sidebar, left sidebar, and content like this:

———————
/* Change right sidebar breakpoint */

@media (max-width:1000px) and (min-width: 768px) {

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

/* Change left sidebar breakpoint */

@media (max-width:1000px) and (min-width: 768px) {

#left-sidebar {
order: 3;
width: 100%;
left: 0;

}
}

/* Change content breakpoint */
@media (max-width:1000px) and (min-width: 768px) {

.site-content {
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}

.content-area {
-webkit-order: 2;
order: 1;
width: 70% !important;
left: 0;

}
}
—————————-
I am able to control the breakpoint for the left sidebar – but I can’t get the right sidebar to disappear before 768px. At that breakpoint the right sidebar is still visible on the tablets I checked it on, which looks strange.

I would like to have the sidebar disappear around 850px. Can you tell me how I can do that.

Here is the site if you want to take a look:
http://staging-internationallovescout.kinsta.com/

Thanks!

[David]

Chris, apologies – this topic somehow slipped past us, did you find a resolution?

[Chris]

Actually I am still having the problem. I am not happy with the right sidebar breakpoint, it should break earlier so there is no right sidebar on tablets.

You can see the live site here:

https://www.internationallovescout.com/colombian-brides

I couldnt figure out how to do a screen shot on a tablet but I simulated the issue on my desktop browser as you can see below:

I thought perhaps the problem was that I was using a 3 column layout but when I look at another one of my sites that I am using generatepress on it has the same issue as you can see here:

And here is an example of the tablet behavior I would like to emulate – this is a genesis theme:

is there a way to control the right sidebar breakpoint?

Thanks

[David]

Hi there, it looks like the right side bar is breaking at the same point as the left sidebar. The only missing part is this CSS:

/* Change content breakpoint */
@media (max-width:1000px) and (min-width: 768px) {

.site-content {
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
}

.content-area {
-webkit-order: 2;
order: 1;
width: 70% !important; /* This needs to be increased to 100% */
left: 0;

}
}

See the comment on the width property – increase this to 100%.

[Author]

Posts