Move central text to the left increase sidebar width

  • Hello,

    I’ve just purchased React. I want to move the central body text column slightly to the left + increase the sidebar width.

    Can you advise?

    Thank you

    The blog I need help with is: (visible only to logged in users)

  • Hey there,

    Before you make changes, I have to warn you that React’s widths are designed semi-particularly, so you might have to make a lot of tweaks to get it just right.

    If you’re OK with that and you have the Custom CSS upgrade, you can begin by adding the following styles:

    #sidebar {
      width: 19.583333%;
    } {
      width: 73.125%;

    That’s a start – let me know how it looks, and we can tweak from there!

  • Hi Andy,

    Yep, I got it about maybe needing tweaks. The changes look OK, but now I would like to slightly decrease the padding between column 1 and column 2 so I have a little more width for the post title.

    Can it be done?


  • Hey SGC,

    I think so! Try this:

    /* Increase width of content area */ {
      width: 77.125%;
    /* Decrease left margin on main content */ .entry.entry-post {
      width: 63.333333%;
      margin-left: 36.666667%;
    /* Increase the width of the post title */ .post-header {
      width: 28.333333%;

    Try taking those values and tweaking a bit – the difference is subtle, but you’re the best judge of a good-looking site! Let me know how it goes!

  • Hi Andy,

    That’s much better. Thank you.

    One other question, just for reference … the changes I’m making to the CSS are showing up in Firefox and not in IE8 (in IE8 the page templates don’t apply either). Is this what you’d expect?


  • Hi there!

    I’m sorry to hear you are seeing problems in IE8. The React theme, and the changes you made should be compatible with IE8. Would it be possible to post a link and/or screenshot of the issue you are seeing?


  • Hi Scott,

    OK, here’s a Word file which shows two screen shots:

    (1) the home page: the CSS changes I made (eg, increasing sidebar width) do not show up

    (2) a secondary page: the sidebar is not visible, even though it is set to appear and does in fact appear in Firefox.

    Hope you can access this file. Cheers and thanks, SGC

  • Hey there,

    You may have uncovered a bug with the theme – thank you for pointing this out!

    In the meantime, you can try adding this to your stylesheet:

    #with-sidebar { width: 80%; }

    Try that to start, and we’ll go from there.

  • The topic ‘Move central text to the left increase sidebar width’ is closed to new replies.