Support » Theme: Attitude » Sidebar/ Content Width

  • Resolved drive4corners


    Hi there,

    I was happy with this theme so far, but was curious how I could modify the theme slightly to widen my content area and either push the sidebar outward, or if I could slightly reduce the width of the bar.

    I think I found where the code is determining the width, but have not yet confirmed:

    /* Sidebar */
    #secondary {
    float: left;
    margin-left: 3.06%;
    width: 31.28%;

    Is it as simple as changing the width value in my child theme??

    Thanks In Advance– definitely contemplating the premium version Attitude Pro!

Viewing 15 replies - 1 through 15 (of 21 total)
  • Yes, that looks like the width of the sidebar, but you might have to also change the size of the main content area. Just give a link to your site if you need more help.

    Also, be sure to make changes through Custom CSS so your changes won’t be overwritten with any updates!

    Thanks for the response Laura,

    The website is:

    I added the following to Theme Options -> Custom CSS but have not noticed any changes on my main blog feed(homepage) or my post pages.

    #secondary {
     width: 21.28%;
     #primary {
     width: 75.64%;
     @media only screen and (max-width: 1078px) {
     #secondary {
     width: 100%;

    Please try refreshing your browser and look again. That is definitely affecting your site. To see what I mean, change that 75.64% to 25% and you will see a big change. It is affecting all the pages that I see.

    If it looks okay, please mark as resolved. Thanks!

    Ok, I see what you mean, Laura.

    My intent was to increase the total width so that content width becomes closer to 1000pixels maximum as opposed to the current ~750pixels. Therefore, when the page is enlarged, my posts and such (mainly images) display larger – as opposed to so much blank whitespace.

    Maybe this has to do with the following parameter I found in functions.php?? What css code would I add to change this?

    $content_width = 700;

    Maybe I’m confused about what you want. Your total site width is 978px wide (for regular desktop displays). Is that what you want to change? Your content can’t be 1000px if your total site is only 978. That is controlled by

    .container {
     width: 978px;
     margin: 0 auto;

    After changing that, you can make your #primary and #secondary larger or smaller depending on what you want. Of course, it looks like you have most of your images cropped to around 670px, so if you want those to expand, you will have to put in larger images. Does that make sense?

    You are correct, the goal is to widen the total container so content width is wider, (and now I know I can size the sidebar to the appropriate % that I want).

    I added your code from above with 1278px and am not getting a change.
    I apologize for the illiteracy, but does that section of code need to be nested below the #primary line?

    PS- I hope my browser cache isn’t throwing me off again.

    My fault. Please try
    instead of

    no, it doesn’t matter where it is in your Custom CSS.


    Ok that worked, but now it looks like the content is spaced to the right starting at the same location as before. AKA what would be the left sidebar is pushing the content out towards the right.

    Any way to reduce this imaginary left-page whitespace?
    I am sticking to right sidebar only.

    Okay, let’s try this:

    .container, #container {
      width: 1278px;

    That did something different.

    Now the content is is sized appropriately but the sidebar is extending past the main header (on the right side).

    Is there a margin value controlling this?

    Okay, this is pretty confusing because I don’t see your .container at all and you have #container set to 1078px instead of the 1278px you talked about before. If you are really okay with it being a little smaller, perhaps try this:

    #container, .container {width: 1078px}

    I tried it Laura, but it did not do what I was looking for.

    For now, it seems like the following is satisfactory, thanks for your help!

    #container {
     width: 1078px;
     margin: 0 auto;

    i see that you are a lot prepared.
    I need 1 thing.
    I need that the sidebar dosn’t go down when the size of browser is 1024px (width). Now for this dimension of windows’s browser the sidebar go down.
    It’s possible to change something in attitude css for change this?

    Plese tell me how made this.
    Thank you!!

    Hi @drag0n70
    A link to your site would be helpful. Have you changed the size of the container, primary, or secondary? You do realize that the theme is responsive and the sidebar is supposed to drop down on smaller screens, right? Send me the link to your site and I can figure out what changes you need to make.

    The problema is simple.

    I set narrow layout.

    The attitude theme resize its width below certain thresholds.
    For example under 1079px resize le with a lot and the sidebar go down.
    Why 1079px and not 1023px or smaller?

    So for those who still have the screen set to 1024px (a lot of peaple) can’t see the sidebar at the side but these sidebar moves under at the bottom of the page.

    It’s possible to change the thresold of 1079px to another more smaller that 1024px?

    There is other solution to visualize the sidebar however?

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘Sidebar/ Content Width’ is closed to new replies.