Need help? Check out our Support site, then


Adjust post column width

  1. veggiesdontbite
    Member

    Is it possible to adjust the width of the post column itself on my blog page?

    The blog I need help with is veggiesdontbite.com.

  2. Yes it is. To keep the overall width of the theme the same, but widen the post area, you will have to narrow the sidebar area (.span 4) and then increase the post area (.span 8) by the same amount. Add the same amount to .span8 as you remove from .span4.

    .span8 {
        width: 770px;
    }
    
    .span4 {
        width: 370px;
    }

    If you want to keep the sidebar the original width and increase the width of the content area, you will have to increase the overall width of the theme and then increase the content area by the same amount.

    Increase the width in the first rule by your desired increase. Add that same amount to the width in the second rule (.span8) and then adjust the left % value to align the grey line between the main content and sidebar.

    .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
        width: 1170px;
    }
    
    .span8 {
        width: 770px;
    }
    
    .main-container .container:after {
        left: 65%;
    }
  3. I should mention this works for reducing the width of the content column as well.

  4. veggiesdontbite
    Member

    Yes, I just want to reduce the overall post/sidebar area a little so that more of my background pattern shows. So do I use the second CSS but take away instead of add?

  5. veggiesdontbite
    Member

    Oh and if I do that, how do I fix the header area because I added this CSS as advised by another blog helper to bring the background up into the header:

    header[role=banner] {
    background-size: 1170px 340px;
    }

  6. As it stands, the maximum width is 1170px. The following reduces that by 100px, taking a 60px off the sidebar and 40px off the content area (content being the most important part). Add the first three rules and then reduce the header[role=banner] width value to 1070px as shown in the last rule below.

    .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
        width: 1070px;
    }
    
    .span4 {
        width: 310px;
    }
    
    .span8 {
        width: 730px;
    }
    
    header[role=banner] {
        background-size: 1070px 340px;
    }

    If you want things narrower still, adjust the values as desired.

    Also in the "Content Width" field at Appearance > Customize > CSS, add 665 as the width (original 705px - 40px content width reduction).

  7. Actually, let's hold off on the above and let me work on it a little more. It isn't working as cleanly as I would like it to when the browser window is narrowed.

  8. Ok, here is the revised code. Give this a try and see what you think.

    .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    max-width: 1070px;
    }
    
    .span4 {
    max-width: 30%;
    }
    
    .span8 {
    max-width: 64%;
    }
    
    @media screen and (max-width: 768px) {
    .span8 {
    max-width: 100%;
    }
    .span4 {
    max-width: 100%;
    }
    }
  9. veggiesdontbite
    Member

    That works awesome for the post/sidebar area, but the top header part is still not narrower. It's the white part of the header that stays the same so it is wider when I do that css.

  10. Change the header[role=banner] rule you have to this

    header[role=banner] {
        background: none;
    }

    and add this.

    header .container {
    background: #FFFFFF;
    }
  11. veggiesdontbite
    Member

    Perfect! Thank you! You guys over there are so helpful. I can't believe how much you can really do on your own when creating a blog/site. Forgive my ignorance, I literally had zero experience with this a month ago and I feel like I've learned and done so much for my site. And there is NO way I would have been able to do this without your helpful staff. If there is ever a way to rate you guys or do something to let it be known how great you've been please let me know. I'd be happy to do it.

  12. You have done that just now, and you are very welcome.

  13. veggiesdontbite
    Member

    Happy Holidays! I'm sure I'll have more questions as I go along but my blog is pretty much what I wanted for now. Thanks again!

  14. Happy Holidays to you as well, and you know where we are when you need us. :)

Topic Closed

This topic has been closed to new replies.

About this Topic