Twenty Eleven Sidebar color

There’s really no way to help very specifically with something like this without seeing the actual site live. But you can try using Firebug to look at what’s happening with the layout when it is resized. Also be sure that your pages don’t have any coding errors as they can cause problems with how the CSS is working:

https://codex.www.ads-software.com/Validating_a_Website

WPyogi,
There’s not really much to show. The only change has been to create a child theme style.css and change the widget-area class

/*
Theme Name: Child Theme
Description: A Child of Twenty Twelve
Author: Rick Cosmos
Version: 0.0.1
Template: twentyeleven
*/
@import url(‘../twentyeleven/style.css’);

.widget-area {
background-color: #FF4400;
}

Any help is appreciated.
R

If you want help with it, someone will likely need to look at the live site and the problem you are describing. Even if it’s an “unchanged” twentyeleven page, it’s not going to be identical to any other site/page.

Hey Rick,
I looked at a twentyeleven site and tried to duplicate what you are describing – didn’t appear obvious. Do you mean that the sidebar runs into the article in the main content section of the page?

WPyogi,
No it doesn’t run into the main content, instead the color I assign to the side bar ends up being the background color of the main content once the sidebar drops below the main content.

R

Hmm, that should not be happening, and these things are so hard to diagnose remotely ?? . It may be that you have a missing or unclosed tags or some other mark-up (HTML) errors — they can easily happen when you are adding widgets or content to widgets. Try using Firebug to look for HTML errors on your page or copy the rendered HTML code (use view source and then copy/paste) to the w3c validator:

https://validator.w3.org/

WPyogi
I’m using google Chrome to figure out what’s what. I’m wondering if the results I’m getting are do to the fact that I’m testing the responsiveness on Chrome’s browser window and not an actual smart phone.

As you suggested I dropped my code into w3c validator and though it came up with 6 errors but nothing that I recognized as a HTML code error. It was stuff like: Duplicate ID searchform, etc.

Personally, I prefer Firebug/Firefox over Chrome, but Chrome should be fine too. I’m only looking on a resized desktop browser too — but that should be okay for testing. So no missing tags or anything like that? It’s also possible that Chrome is “fixing” missing tag problems when rendering the HTML. In Firefox, it does that, but they are in red when you use View Source…don’t know if Chrome shows that. There may actually be a tool for validating code — so check for that. Duplicate ID’s should be corrected as well — you can only have one instance of an ID on a page…it won’t cause problems, but valid code is always better :).

You could also validate your CSS just to be sure it’s not something there.

WP-
As luck would have it I had Firebug loaded also. I I did the validation and the errors I received where:

Line 98, Column 201: Attribute pubdate not allowed on element time at this point.

Line 110, Column 203: Bad value category tag for attribute rel on element a: The string category is not a registered keyword or absolute URL. Whitespace in path component. Use %20 in place of spaces.

Line 150, Column 116: Bad value generator for attribute rel on element a: Not an absolute IRI. The string generator is not a registered keyword or absolute URL.

Can’t say it was anything I did.
R

No those are not you or causing the issue. Nor a problem really. I’ll try to think about this one! No bright ideas right now.

WP-
I appreciate all the help and look forward to more ideas. Once I’m done tweaking everything I can I’ll upload the site and see if the problem still exists.

THanks,
Rick

WP-
Exploring my page with Chrome, what it really looks like is the code
<div id=”secondary” class “widget-area” role=”complementary”> takes over the post area when the browser is reduced horizontally.

Hope that makes sense.
R