Need help? Check out our Support site, then


Altering the blog width

  1. Hi.

    I am new to CSS and I was just wondering how to alter my blog's width so that it spreads out through the page. I am using The Morning After theme. The blog site is tastebu.com

    Thank you.

    The blog I need help with is tastebu.com.

  2. Ok, so there's a lot of steps involved, so you're going to want to sit down sometime when you can experiment. I've found that spending an hour messing around with CSS on one thing is more productive than spending four 15 minute chunks working on one problem - because I forget stuff or I get confused. So that would be my starting piece of advice with working with CSS - make a little bit of time for it. You'll do great!

    Now, the problem you want to work on is your page width. The page is set to a 960px grid, so you're going to find yourself tweaking things here and there to maintain your proportions.

    To instead expand your website across your page without getting cut-off on small screens, you want a website set in percentages instead of pixels.

    Start here:

    body {width: 100%;}

    This tells your page that you want to use 100% of the screen real estate, regardless of how many pixels that actually is.

    Now, this theme has everything broken down to best fit 960px, so we'll have to go through and change several things:

    .full-width {width: 95%;}

    This one is a class set on several things (your header, footer and nav) that will tell them that instead of the full-width size being 960px, it is instead 95% of the screen. I didn't go to 100% (like in the body) so that you will have a touch of breathing room on either side of your actual site before the browser wall, but you can change this.

    Now your homepage is split into two columns called #home_left and #home_right, and they are both set to the same value. So you'll need to split them apart - this is where you will have to start doing some of your own experimenting:

    #home_left {width: 60%;}

    #home_right {width: 40%;}

    There may be margins that knock these out of alignment, so you may find that your right column appears below the left - simply adjust your numbers appropriately until they fit the way you want them to.

    You'll want to preview the changes in the CSS stylesheet before you commit them, but this should get you started at least.

    That's JUST your home page, your other pages are in a different layout, so let's look at those next.

    You'll notice you've already overwritten some parts, so we're a step ahead on these pages. Again, this is the body of your page that we're working on, so tweak these numbers until you see it the way you want it.

    .primary-sidebar, .archive-info {
        width: 15%;
    }

    This affects both your archive sidebar and the one on the right side - so if you want these different widths, just split them apart, like this:

    .primary-sidebar {width: 10%;}

    .archive-info {width: 20%;}

    But use your own values for the widths as you see fit.

    For your main content:

    .mid-column {
        width: 60%;
    }

    Your type face is small to my eyes at this width, so you may consider bumping that up - but that is strictly my opinion!

    If you're feeling VERY adventurous, I would recommend changing any place you see width represented in pixels into percentages. It is a little time consuming, but the payoff is a responsive site that works regardless of browser width. If you want to get fancy, you can convert your text sizes to ems - and to find out more about that, I'd suggest this resource: http://www.alistapart.com/articles/responsive-web-design/

    Good luck!
    -Z

  3. Here's my take:

    .container,
    #navigation,
    .full-width {
    	width: 1200px;
    }
    #home_left,
    #home_right,
    #copyright,
    #credit {
    	width: 590px;
    }
    #home_left #latest_post_image img {
    	width: 100%;
    	height: auto;
    }
    #home_left .feat_content {
    	width: 97%;
    }
    .primary-content {
    	width: 890px;
    }
    .primary-sidebar,
    .archive-info {
    	width: 290px;
    }
    .widget_facebook_likebox iframe {
    	width: 240px !important;
    }

    Adjust the numbers as necessary.

    Note that not everything will expand to fit all the way, like the Facebook widget.

Topic Closed

This topic has been closed to new replies.

About this Topic