Build Your Own Business Website header image

Help! My Thesis 2.1 Sidebar Drops to the Bottom of the Page

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we show how to fix a Thesis 2.1 sidebar that drops to the bottom of the page. In Custom CSS, we change the width of the custom container, take the image and make it wider so that it matches. We also get rid of bottom margin and change the bottom border to accommodate the content of the page.

The other thing to do is to change the width of the content and the easy way to do it is to take the Custom CSS and change the content width to accommodate the border.

Video Transcript

Hi Karen I just unmuted your microphone. Do you have a microphone? Oh, no mic okay, so I’m copying your URL Clanny Services. So the reason this is happening is because there’s not enough room for all of this and that’s probably due to the border here. Let’s see page and then content box and then content and sidebars and content box and if we make this let’s see box sizing, border boxes, does that solve the problem? No, it doesn’t.

Container, okay box sizing, border box. No, that also doesn’t change it. Okay, so the reason why this is happening is that it has an explicit width and the border well, actually that’s not on the border, where is that silly thing? In this one container but I don’t see the border showing up there. Okay, is it on page? It is page. I guess what I would do is in your Custom CSS I would say custom container what is it right now, 1011 and this border is how wide?

The border is 4 pixels so you need 8 pixels more of width so I would say is width is 1020px. Okay now, maybe not, maybe it’s 1018, 1019. Okay, so it needs to be 1019 px wide in order to handle this so you would in your Custom CSS under Custom Container you give it width 1019 px. Then you are probably going to need to change this header image or maybe it would be just as easy to say background-position:right.

I see, that little thing is part of it so I guess the answer here is that you’re going to want to take this image and make it a little bit wider so that it matches this. You can also just get rid of that bottom margin and that bottom line out of it and you could add border-bottom: and then 4px solid red and of course it’s not red, what color do you really want? You really want this color right here, obviously it’s more than 4px, it’s more like 8px actually I guess, something like that.

So you could just take that bottom border off of your image and then give it a different background position. Okay, let’s see what’s another choice rather than actually changing any of that stuff? The other thing you could change instead would be to change the width of this. You could leave all the rest of your design in place but you could change the width of the content from 737px to 729px.

So if we did 729 px, you know that’s the easy way to do it really. The easy way to do it is to take your Custom CSS and change the content width to 729. That makes the content width small enough so that it can accommodate the border. That’s really the simple solution, just change the content width. Essentially take 8 pixels out of the width of the content.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one