Need help? Check out our Support site, then


Changing side bar sizes

  1. Hi, I would like to make the primary side bar wider, keep them main blog component the same size and make the right sidebar smaller.

    So both sidebars will be the same size.

    Any help is really appreciated.

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

  2. Hi there, this is a little difficult to explain. How much wider do you want the left sidebar area and I can then work from that. Things are a little interdependent on this theme and a little more complex due to the design.

  3. Hi and thanks for your reply. I'm not 100% what unit I should give the answer in but I will try my best to describe.

    I guess the easiest way to describe would be to say half way between what it is now and the right hand side bar.

    I am reasonable experienced with editing css so I feel comfortable playing with the number once I know the code to plug in.

    This may be taking things a bit far, but if possible I'd like to also widen the area in which the blog text appears.

    I appreciate any help.

    Alex

  4. Ok, since one of your desires is to widen the content area, and another is to narrow the right sidebar area, let's take some away from that sidebar and add it to the content area as a start. The right sidebar is set at 29.0476%, so let's take that down to 24% with the following.

    .content-sidebar {
        margin-left: -24%;
        width: 24%;
    }

    Next let's increase the content width by about the same amount.

    .site-content {
        margin-left: 222px;
        margin-right: 24%;
    }
    
    .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
        max-width: 650px;
    }

    See how the above looks to you and then we can make adjustments for the left sidebar.

  5. That is almost perfect. The left and right side bars are now perfect (I managed to figure the left one out). The area for the blog writing is perfect.

    Now, all I would like to do is have the title and text of blog post stretch to within about 1.5cm of the right side bar. (I've included an image here that I think makes it clearer https://dl.dropboxusercontent.com/u/23646621/diagram.jpg )

    Really, thank you so much for taking the time to help me with this, I really appreciate it.

  6. Ok I figured out the title, all that is left is making the blog text the same width as the title (700px)

  7. another update! my current CSS reads. I've decided the width of title and sidebars is perfect with these number, just need blog text to match width of title (650px)

    .site-title {
    font-size: 1.7rem;
    line-height: 1em;
    padding: .4em 0;
    }

    .site-description {
    font-size: .9rem;
    line-height: 1em;
    padding: .4em 0;
    width: 186px;
    }

    .content-sidebar {
    margin-left: -24%;
    width: 24%;
    }

    .site-content {
    margin-left: 275px;
    margin-right: 24%;
    }

    .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
    max-width: 650px;
    }

    .primary-navigation {
    float: right;
    font-size: 12px;
    margin: 0 1px 0 -12px;
    padding: 0;
    text-transform: uppercase;
    }

    .primary-sidebar {
    width: 182px;
    margin: 0 0 0 -7%;
    }

    .entry-title {
    width: 650px
    }

  8. another update. the issue im now having is

    .entry-title {
    width: 650px
    }

    is also affecting the preview titles that are displayed under the images at the top.

  9. Let's create a more specific selector to target only the post titles in the content area and use "max-width" so that it doesn't mess up alignment for narrower browser windows and devices such as small tablets and smart phones. See how the following works for you.

    #content .entry-title {
    max-width: 650px;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic