Sidebar contents dissappear after reducing width of side bar

Can you please post a link to the site in question?

In just looking at this:

#main {
width: 84%;
}

#content {
width: 79%;
}

#secondary {
margin-left: 2%;
width: 18%;
}

#tertiary {
width: 15%;
}

The CSS looks fine so I am thinking it is heavily dependent on the layout of your site.

Do the sidebars appear at all or is it just the contents within that are missing?

(Also, to show code on the forums, use backticks rather than ‘ ‘. :))

Hi unfortunately my site is not live yet. In Australia we have to go through government registration to obtain a website, which can take up to 3 weeks. So instead of waiting I’m running wp locally.

Here is a Picture , I hope this helps

Hi there!

Thanks for the picture. I understand that a live website isn’t possible at this moment, but unfortunately, that makes it more difficult to troubleshoot.

Before I suggest getting more in-depth support from the theme and/or plugin providers, let’s see if we can try and figure some things out first.

1) Have you readjusted the sidebar widths to what they originally were?

If you did, did the contents within return?

2) If you put a border around each of the sidebar blocks, do the sidebars reappear? Where do they appear?

If you made the sidebars too small, it is possible you won’t see much depending on how the sidebars are designed to handle overflow and content not fitting in.

To answer your questions:

1) Yes, and yes. The contents return once I take the code out of the custom.css.

Here is the home page without the code.

Here is the products page without the code.

2) When I added to custom CSS:

#sidebar{
border: 2px solid #EEE;
float: right;
width: 296px;
}

The menu items did appear, but they appeared right at the bottom of the page.
This is what they look like:

Home

Products

If it helps I’d like to add that I’m using the Wootique theme.

Hi there again! ??

Yes, that does help some, though being that I have never used the theme before, I may not be able to give you much more help beyond this post as I am currently using the demo theme to base my thoughts off of.

That said, firstly (and you possibly already know this and if you do, I’m sorry for repeating information; I never got to ask you how comfortable you are with CSS! to skip this section, jump to the =Ideas section of this post):

Your theme’s building blocks dimensions are default set at fixed widths.

According to the theme demo, these are the dimensions specified:

#main{width:504px; padding-right:40px; }
.layout-full #main, #main.fullwidth { width:880px; }

#sidebar{width:280px;}

.col-left { float: left; }
.col-right { float: right; }
.col-full  { width: 980px; margin: 0 auto; }

.layout-right-content #main.col-left { float: right; }
.layout-right-content #sidebar.col-right { float: left; border-left:0; }

and

#content{ width:880px; padding:50px; background: url(images/sidebar-right.png) 10px 0 repeat-y;  }

Note: #content has a class associated with it which is .col-full if you look in the HTML. This means these two are directly related to each other and this is very important.

According to the CSS, your default full column width’s .col-full maximum allows for 980px total. However, in reality when you calculate in the related #content information, it allows for 880px with 50px for padding. 880 + 50 + 50 = 980 total width.

That padding in the default #content is what is giving you the ‘white’ space all around your #main and #sidebar areas. If you decrease the padding on #content, you can decrease that particular white space.

Additionally, the default #main specifies a padding-right: 40px which adds 40px of padding to the right of the main content block between it and the sidebar block. If you decrease that padding number, you can also increase the width available to you for your main and sidebar contents.

An important thing to always remember is:

The math MUST add up correctly! Widths (and heights if calculating heights), paddings, and margins and the widths of parent containers all need to be taken into consideration when making changes to dimensions on a pre-existing layout or when building a layout.

=Ideas!

That said, let me address some things that happened when you added in the custom coding:

1) Regarding this:

#sidebar{
border: 2px solid #EEE;
float: right;
width: 296px;
}

If you added only this to your theme’s custom CSS, then what likely happened is that you made the width too wide to fit in the specified space.

Because of this, there is possibly a conflict between the contents of the #main and the contents of the #sidebar and because of that, your sidebar contents got pushed down past the main contents.

If you increase the size of one block (or alter its positioning) – either in its width or padding (or margins) – you must decrease the size (or positioning) of the other block accordingly.

The fact that you have a clashing and major overlap of contents from the #main block (the comment block) and the #sidebar block tells me that the widths you’re specifying are adding up to greater than what the biggest container (the #content and the .col-full) can hold.

2) When doing code overrides (you’re using the custom.css file, right?), you need to override based on what the original code looks like AND bear in mind that whatever you -don’t- override in the original CSS still applies.

Something like this:

#content{ width:930px; padding:25px; background: none; }

would fully alter the original #content by specifying a different width, different padding, and different background setting.

That said:

3) When doing overrides, even if you don’t want to change something (let’s say the background setting of #content), you SHOULD probably copy it from the original CSS anyways.

This helps to prevent confusion like in your original post’s CSS.

Even if you know you can combine things together to get the job done, the BEST and SAFEST way to get results when overriding is copying the author’s coding pattern/format to ensure that YOUR changes – which follow the author’s formatting – are applied.

That said:

4) In your original post, you only partially overrode some coding (the width), but not all of it (like the padding).

In particular, the padding that was/is in your default CSS is still being applied even though you didn’t specify the code in your override.

Additionally, you tried styling two blocks in the sidebar region that weren’t styled already. Which could be fine… but given what you did NOT override, you got yourself a bit of a mix-up.

5) So… back to your original post… What happened to your original post’s CSS?

This is what your original post’s CSS translated into:

#main {
width: 84%;
}

#content {
width: 79%;
}

#secondary {
margin-left: 2%;
width: 18%;
}

#tertiary {
width: 15%;
}

Specify a #content width of 79% (but forgot about that 50px default padding which makes the width bigger)…

inside of it, specify the #main content to take up 84% of its allotted block (but forgot about the 40px padding which makes it bigger)…

specify the #secondary and #tertiary blocks INSIDE of the #sidebar to be 18 and 15 percent respectively with a 2% margin on the 18%…

which leads to:

Being that those two blocks are INSIDE the sidebar, the percents you specified are also therefore calculated based on the size of the #sidebar.

This is very likely why they ‘disappeared’ because 15-18% of an already small size makes it very very small in width indeed.

That said:

6) To help you see what you are doing, create a very visible border around the block that you are editing.

This helps you to see what changes, exactly, are being applied… or not.

When changing sizes of things and working with the layout, I always personally use this tip to help me visualize what changes are happening where and it also helps me to troubleshoot things like padding and margins that can sometimes be ‘invisible’ or easily forgotten.

Everything said – phew, that was a lot! – I wish you the best of luck and hope that maybe some of my thoughts will be helpful in some way to you.

Hi and thank you so much for sharing your time to post such and informative piece of writing.

Unfortunately I couldn’t fix this error with the site, but I definitely learned a thing or two.

I have payed for the woothemes canvas and has rectified the problem that way.

Maybe you could help me with another issue i’m having (Not too familiar with css but not a complete newbie).

I have a full width layout now, with 2 sidebars on either side of the page (left and right) and and am wondering if there is a plugin of some sort that can handle customizing side bars on each page. I know there are plugins that can customize only one sidebar but I’m looking to customize the the two.

Hi again! ??

Can you please elaborate on what you mean by customizing the sidebars? Do you mean their sizes and colors and such or the contents within?

Additionally, since you now have a paid theme, you can also contact Wootheme’s support team for more theme-specific comprehensive support.

I’ve contacted them, but no response yet.

So my page layout is two side bars (one of left and one on right)

I was wondering if there is a plugin that can deal with changing the content of each sidebar separately within different pages.
E.g HOME PAGE has Categories with links on the left sidebar and facebook widget on the right sidebar, whist PRODUCTS PAGE has Cart widget on the left and RSS Feed on the right.

See what im saying :)?

So far I can only work out how to customize on single sidebar page layout.

Thank you for elaborating; I understand now! ??

So what you’re looking for is to change what widgets appear on what Pages.

You can either create Custom Pages and add custom sidebars (more difficult to do; would probably need Woothemes’ help) or use a plugin (easier and only involves adding a plugin).

If you look at the Jetpack plugin, for example, it adds something called Widget Visibility to your widgets that allows you to select where these widgets appear.

The downside is, Jetpack also comes with a bunch of other functions and features which can be really awesome if you need them… but maybe a little too much if you don’t.

The plugin collection – if you search it – might have some other options that deal with ONLY the ‘Widget Visibility’ issue… but I don’t know how well those work.

Hi thanks, good news – there is a single plugin called ‘Jetpack Widget Visibility’ , now to work out how the damn thing works