Need help? Check out our Support site, then


CSS to widen center column and shrink side column

  1. bostonlovessanibel
    Member

    Hello - I love the Watson Theme, the only change I want to make is to widen the center column and narrow the right hand column. I have the custom CSS package - and I see the stylesheet but I am obviously doing something off with my code. Can you please assist?

    The blog I need help with is bostonlovessanibel.wordpress.com.

  2. Hi there. Can you post the code that you are trying to use?

  3. Ahh, I see the issue. Try using the following code:

    @media screen and (min-width: 900px) {
    body.page .content, body.search .content, body.archive .content,

    body.blog .content {
    width: 70;
    }

    aside[role="complementary"] {
    width: 26%;

    }

    ]

    You can play with the two percent values to get them to where you want them, but the numbers I put in are closer to what you're looking for.

  4. Edit: sorry, the forum screwed up the formatting. There should be an additional "}" at the end of that code (inside the quote box)

  5. bostonlovessanibel
    Member

    Andrew thank you this *almost* works. I was able to get the right hand side column to narrow but the code above shoved all of the center column text over to the right in a skinny column - even with the extra "}" added. Here is a link to what I see http://s1333.photobucket.com/user/mkddoherty/media/ScreenShot2013-05-03at92457PM_zps45d6249f.png.html

  6. Oops, I just realized there should be a % sign after 70 in the first CSS rule. Sorry about that.

  7. It was setting the width to 70 pixels, not 70%.

  8. bostonlovessanibel
    Member

    Thank you!!!!

Topic Closed

This topic has been closed to new replies.

About this Topic