Changing the main content column width in the 2014 theme.

• 

  jstacklab · Member · Mar 13, 2015 at 10:01 pm

  • Copy link
  • Add topic to favorites

  I am trying to change my main content width in the 2014 theme CSS. I have a gallery in my primary sidebar and a event calendar in the secondary. In the main content middle column, I want to text expanded past the 647px constraint. I would like 850px. I am having issues decreasing the sidebars and increasing the main content column.

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

• 

  thesacredpath · Member · Mar 16, 2015 at 5:22 pm

  • Copy link

  Hi there, replace all the CSS you currently have with the following and see what you think. It gives you a maximum width for content of 810px.

  .site-content {
      margin-right: 18.0476%;
  }
  .hentry {
      max-width: 100%;
  }
  img.size-full, img.size-large, .wp-post-image, .post-thumbnail img {
      width: 100%;
  }
  .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
      max-width: 100%;
      width: 100%;
  }

• 

  lindseyashmore1 · Member · Mar 16, 2015 at 5:40 pm

  • Copy link

  Thank you! This did exactly what I wanted!

• 

  thesacredpath · Member · Mar 16, 2015 at 6:36 pm

  • Copy link

  Hooray, and you are welcome!

• 

  lindseyashmore1 · Member · Mar 20, 2015 at 6:27 pm

  • Copy link

  thesacredpath- I have another question that stems from the question you already answered. When I try to decrease the size of my feature image, it either decreases my feature image and my header image, or it decreases my feature image and leaves a grey fill where the image used to be. The feature image was expanded to the edges of the column just like the text when I made the changes you suggested.

• 

  thesacredpath · Member · Mar 23, 2015 at 4:42 pm

  • Copy link

  The feature image was expanded to the edges of the column just like the text when I made the changes you suggested.

  I did that because I thought it looked better than having the smaller image floated to the left with the whitespace to the right of the image.

  Remove the following from your custom CSS

  img.size-full, img.size-large, .wp-post-image, .post-thumbnail img {
      width: 100%;
  }

  and replace it with this which centers the image and take away the background image. See what you think.

  .post-thumbnail {
      background: rgba(0, 0, 0, 0);
      text-align: center;
  }