Tell me more ×
WordPress Answers is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am trying to change the sidebar background for the Twenty Eleven theme I added this to style.css :

background: #F3F3F3;

under : #secondary { ..... }

but when I smaller the browser in order to test the responsive option , the background color for the sidebar becomes the background color for the content .

any reason why this happens ? http://wp-themes.com/twentyeleven/

share|improve this question

closed as off topic by Michael, Wyck, Chris_O, Brian Fegter, kaiser Sep 19 '12 at 17:06

Questions on WordPress Answers are expected to relate to WordPress within the scope defined in the FAQ. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about closed questions here.

1 Answer

To understand what's going on, you need to be familiar with CSS floats and document flow. The main content area #primary is floated left, so it's removed from the document flow. When the sidebar gets pushed below and appears below the content, the #secondary element actually starts at the top of the page, so the background stretches the whole length even though the content it contains starts below #primary. To fix it, you have to set float: none on #primary under @media (max-width: 800px).

share|improve this answer
thanks for the info . I installed this theme and I am just trying to make a few changes. I want the sidebar to look like this : webrevolutionary.com/wordpress/wp-content/uploads/2007/06/… but when I change the background it does not change the background like the image, really appreciate if you help me resolve the issue – John Smith Sep 16 '12 at 4:17

Not the answer you're looking for? Browse other questions tagged or ask your own question.