twentyeleven – weird sidebar issue

  • Heya,

    so I’ve been working on custom child theme based on twenty-eleven (that’s just for you Esmi)
    and there’s a weird effect that happens to my sidebar when I change the width of the window.
    The sidebar disappears and the main text area becomes black (the colour of the sidebar)
    Check it out here https://www.newcastlechristianstudents.org/blog

    Anyone got an idea of what might be causing it?

    here’s the css for my sidebar (I think)
    ‘blockquote’
    #secondary {
    float: right;
    margin: -30px 0 0 0;
    padding: 10px 10px 100% 30px;
    width: 20%;
    background:#000000;
    ‘/blockquote’

Viewing 4 replies - 1 through 4 (of 4 total)

  • that’s just for you Esmi

    Yay! The message is getting out there! ??

    Anyone got an idea of what might be causing it?

    Since it’s only happening on smaller screens, I think the black background for the sidebar is sliding into the content area. What you could is add a CSS min-width to the page container – set to about 960 -1000px.

    In your style.css file, not far away from the #secondary {} rules, add this line for the #primary rules, line 84 : background-color: #FFFFFF;
    You’ll end up with

    #primary {
    float: left;
    margin: 0 -26.4% 0 0;
    width: 100%;
    background-color: #FFFFFF;
}

    Thread Starter stevewatt

    (@stevewatt)

    Hey thanks for the replies.
    I haven’t had time to look at coding till this afternoon. And I’ll I’ve got to give it now is about 5 minutes.

    I think you’re right Emsi, that’s exactly what’s happening.

    Thanks heaps for your suggestions, I’ve tried them both.
    Unfortunately neither has worked.
    Min-width on the #page has stopped the page from scaling, but weirdly the current error still appears at low widths.
    The other problem with the min width is it makes the page not scale well for mobile browsers which an increasing number of uni students (who the page is aimed at) use for their browsing.

    Is there a way to make the sidebar not display once the width gets below a certain number of pixels?

    Thanks again (in advance) for you help

    Steve

    I’ve tried them both.
    Unfortunately neither has worked.

    Ok so maybe I misunderstood what you’re trying to achieve :/ … I Thought you wanted your left column to always stay white. The CSS code I gave you should have done the trick.
    Also, I noticed this CSS rule, line 46 of your styles.css file :

    #primary {
	background-color: # fff;
}

    There’s a syntax error in this, as there should be no space ( -> #fff ) so maybe that’s why it doesn’t work as expected.

    Is there a way to make the sidebar not display once the width gets below a certain number of pixels?

    Yes, Media Queries are what you’re searching for.
    Your theme use them – from line 2252 of your styles.css file.
    There’s plenty of explanations on the web, try googling it; we can help, but we can’t learn for you ^-^. Here’s a good one to begin with : https://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘twentyeleven – weird sidebar issue’ is closed to new replies.