[Support request] Moving (or removing) left sidebar only with media query

[Cindy]

Hi, I’ve got a couple of post types that use sidebar/content/sidebar with a 1200px width container. Looks great with full screen and with 768 and lower (when the sidebars get knocked down to the bottom) but am finding it’s a bit cramped when the screen is between say 1000 and 768. The left sidebar is 15% and the right sidebar is 25%. What I thought I’d do was try to bump the left sidebar over to the right when the screen size is <1000px and I’ve got it working but I’m not sure if this is really the best way to do it.

I’ve included this media query which resizes the main content area to 75%, gets rid of the spacing on the left, and bumps the left sidebar over on top of the right sidebar.

@media (max-width: 1000px) {
	.tablet-grid-60 {width: 75%;}
	.tablet-pull-60 {left:0;}
	.tablet-grid-15 {width:25%;}
	.tablet-push-15 {left: 0%;}
	.one-container.both-sidebars .site-main {margin-left: 0;}
}

Then of course I have to change the .tablet-grid-60 back to 100% width when the screen is 768 or less.

The other option is just hiding the left sidebar completely and displaying that widget on the right on 1000 or less.

Anyhow, it works but it seems a little sloppy to me, and wondered if you had any other ideas? The other thought I had was maybe using jquery to change the classes at certain screen sizes but would that be any better…?

Any suggestions? Thanks!

[Leo]

Hi there,

Your CSS solution should be good. I’d recommend testing on different devices.

We can definitely have a look if you can provide a link to your site?

[Author]

Posts