[Resolved] Keep sidebars the same width when responsive [option]

[Tom]

I just took a look at Responsive and it seems to be using percentage based widths as well.

Anything is possible with CSS if you want to tackle it, but it’s probably not something I would include in the theme itself.

Did the media queries I provided above not work for you? That’s definitely the best way to do it.

[Dmitry Ermakov]

I have the same problem. I use adsense 300×250 ad units in the sidebar and at certain break points the ad unit sticks out of the sidebar because its width is not set in %. I would LOVE to be able to fix the sidebar’s width to 300px for all instances, except the ones when it goes to the bottom of the page.

Thanks in advance.

[Pete]

I agree. Fixing the sidebar only, like ‘Responsive’ (or better yet having an option for us to choose the px width in the customiser) would be great.

[Tom]

I’ll take a deeper look at this 🙂

[Dmitry Ermakov]

Tom,

That would be great! Thank you!
I looked at different solutions. It seems there are some. Maybe you can give us a css code that we can put in the wp css to override the one that is generated directly on the page?

I like the theme, but not being able to use adsense in the sidebar is a huge deal breaker for me.

[Tom]

I’ll definitely work on it 🙂

For the time being, why not use the responsive adsense ads? They don’t respond on resize (but people don’t usually resize the site they’re on a whole lot), but it will fill the container it’s in on load.

[Pete]

Thanks Tom, the sidebar is a biggy for me too 🙂

[Tom]

The issue I’m having with this is that it’s basically not possible to have one fixed sidebar while the other one is responsive (percentage based).

Responsive theme is doing the exact same thing GP is, the sidebar has a percentage width, not fixed.

The reason it seems to be fixed is because as soon as the sidebar would usually start to decrease in width, the theme goes into responsive mode, which I think is a little early.

This basically means that once the sidebar is wanting to resize with your ad in it, the sidebar jumps down below the content along with your ad.

This can be a good thing I suppose, but it’s also not ideal because people using a smaller screen or iPad won’t see your ad until they scroll all the way to the bottom of the page.

I still think the best way to handle this is to use the CSS I mentioned on the first page. As the screen is resized, you can increase the size of the sidebar, and decrease the size of the content.

However, this can all be avoided by simply using the responsive option Adsense provides – it means the ad will be whatever size it can be on refresh.

It’s not often people are resizing their browser up and down while on your website unless they’re a developer themselves seeing how the responsive functionality works on your site.

So these are the options:

a) Be like the Responsive theme and enable the responsive layouts super early (980px instead of 768px).

b) Use the media queries I provided on page 1.

c) Use responsive ads provided by Adsense.

Let me know your thoughts 🙂

[Dmitry Ermakov]

Hello Tom,

Have a look at this theme here http://demo.mythemeshop.com/s/?theme=TruePixel (the one that’s called social). The sidebar there is fixed yet the content is fluid and responsive. That’s exactly what I wanted. Am I missing something, or calling things the wrong way. Let me know. Thanks!

[Tom]

Hi Dmitry,

That theme is also using a percentage width for the sidebar.

As you size down, you’ll notice the sidebar getting smaller, and the Facebook widget getting cut off.

[Pete]

Hi Tom. I understand the issues here. It’s a hard one. We love that we can have such flexibility yet it comes at a price.

My suggestion would be to use the media css. How we implement this with so many combinations of content and sidebar/s is going to be a lot of work. Could all the css layout combinations be built in to the theme?

I love my sidebar cake and I want to eat it but if the slice of cake is too narrow then it’s not worth it. 🙂

Thanks, Pete

[Dmitry Ermakov]

Hey Tom,

Thank you for checking it out. You are right. Now that I look at it, it does scale the same way. Sorry about that!

I was looking at different websites and I think this one – http://www.boredpanda.com/
has the responsive part setup very nicely. The sidebar does not resize, at least visually, because the contents are not affected.

Would it be possible to copy their css setup? What do you think?

[Tom]

That site is definitely doing it, but they’re using absolute positioning for their sidebar, which then wouldn’t allow for GP to have as many layout options as it does. It’s also a good rule to only use absolute positioning when you absolutely have to – using it on a sidebar is a kind of overkill.

Another option if you guys want to replicate the way the Responsive theme handles the sidebar is to add a media query forcing the sidebars to go below and content to go to 100% once the sidebar starts to resize.

So we would basically add CSS to force mobile mode on the sidebars before the rest of the site goes into mobile mode.

Let me know if you’re interested in that code 🙂

[Dmitry Ermakov]

Hello Tom,

Thank you for looking into it. I would definitely love to have that code. I really like your theme. This would enable me to use it.

Thanks!

[Tom]

Great 🙂

Here you go:

@media screen and (max-width: 1100px) {
	#primary.content-area,
	.sidebar {
		width: 100%;
		float: none;
	}
	#main.site-main {
		margin-left: 0;
		margin-right: 0;
	}
}

You would replace 1100px with whatever width you have set as your container width in the Customizer.

Let me know if you have any issues 🙂

[Author]

Posts