Twenty Eleven – Percentages and Width Adjustments

I would love some help with this. Thank you!

Try using Firefox with the Firebug add-on for this kind of CSS work.
https://getfirebug.com/

I’m using Firebug. Again, per my post, I’ve tried everything I can think of to do. I don’t understand what’s controlling the sidebar width. It seems to be relative to something else, but I’m not sure what.

So, can someone please help with this?

Thanks.

I’m still needing some assistance with this so that I can finish my mother’s website. Thank you.

Hello again,

This seems so silly that I can adjust just about everything else with my website, but I can’t figure out how to adjust the width of the sidebar. When I try it disappears, which tells me that the percentage width is partnered with something else. But everything I’ve tried according to common sense isn’t working. If Esmi or another experienced participant is reading this, could you please help me out? I want to make the sidebar wider and to narrow the gap between the entry content and the sidebar.

Thank you!!

You cannot widen the sidebar without either decreasing the width of the main content area or increasing the width of the overall page wrapper.

Ugh, I’ve tried that. I’m feeling like an idiot. The width of the page is okay (it was decreased), but when I try to partner the sidebar width with the content area, it doesn’t work. What specifically needs to be partnered with the sidebar width percentage? It’s currently 21%, but what does mean? Where’s the remaining 79%? I can successfully alter the main content area, but nothing seems to allow me to adjust the sidebar. There’s plenty of room to make it wider. See that big gap between the left content and the sidebar? How do I do this? Man, shoot me now, please. This is nuts.

Here is the solution to this problem:

When you want to adjust the sidebar bar width via the Twenty Eleven theme, you must also adjust the #primary margin-right so that the #secondary margin-right + width adds up to the same amount. Like this:

#primary {
    float: left;
    margin: 0 -29.5% 0 0;
    width: 100%; }
#secondary {
    float: right;
    margin-right: 4.5%;
    width: 25%; }

I’m not sure why the #primary margin must equal all of the #secondary percentages, but they are partnered together. If you don’t change the #primary margin-right percentage, your sidebar could disappear.

Thanks.

I adjusted these presentages to my site but I need my sidebar width a little wider. Which presentages should be put?

here is my website https://diafotistiko.gr/

thank you

Mainmoose is right, you basically need to increase/decrease the margins equally. This is for the left sidebar layout, so don’t copy/paste it unless thats the layout you’re using.

.left-sidebar #primary {
    float: right;
    margin: 0 0 0 -30.4%; /* increased left margin 4% from -26.4% to -30.4% */
    width: 100%;
}
.left-sidebar #content {
    margin: 0 7.6% 0 38%; /* increased right margin 4% from 34* to 38% */
    width: 58.4%;
}
.left-sidebar #secondary {
    float: left;
    margin-left: 7.6%;
    margin-right: 0;
    margin-top: 20px;
    width: 22.8%; /* increased sidebar width 4% from 18.8% to 22.8% */
}

I wrote a guide on how to change the sidebar width in Twenty Eleven, I don’t like spamming my site, but here it is https://zeaks.org/twenty-eleven-change-sidebar-width/

Make sure to use a child theme.

I need to adjust an ad 300×250

MainMoose –

Take a bow. I struggled and struggled with this until I found your response above.

Zeaks – I apologize – but your tutorial had me pulling out my hair.

Probably because I am new to wordpress. But I did not see any “right” or “left” sidebar anywhere.

Thanks to both of you though. I appreciate all efforts!

Glad you figured it out.

@tg1 Twenty Eleven has 3 layouts, left sidebar, right sidebar and no sidebar.
.left-sidebar and .right-sidebar are the body classes for those two layouts. You don’t want the left sidebar layout to use the same CSS as the right sidebar layout, which is why i added the classes.

I probably should of explained that, I’ll update my post.

@zeaks – That would be cool. How does one find the “left” sidebar? I have no idea there was a layout like that in Twenty Eleven.

Thanks!

Here is a example of adjusting sidebar width to 300px.
`#primary {
float: left;
margin: 0 -33.9% 0 0;
width: 100%;
}
#content {
margin: 0 34% 0 3.9%;
width: 58.4%;
}
#secondary {
float: right;
margin-right: 3.9%;
width: 30%;
}
You can adjust to other percentages or width following this tutorial.
https://blaok.com/in2012/adjusting-the-width-of-sidebar-in-twentyeleven.html